<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>移动端模拟hover</title>
<style>
html {
font-size: 100px;
}

* {
font-size: .16rem;
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
z-index: 10;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.items {
margin: 0;
padding: 0;
list-style: none;
}
.items li {
box-sizing: border-box;
line-height: .40rem;
text-indent: 1em;
border-bottom: 1px solid #e3e3e3;
}

.items li.active {
background-color: #e3e3e3;
}
</style>
</head>
<body>
<div class="content">
<ul class="items">
<li class="action-btn">item1</li>
<li class="action-btn">item2</li>
<li class="action-btn">item3</li>
<li class="action-btn">item4</li>
<li class="action-btn">item5</li>
</ul>
</div>

<script src="http://dn.yunzhenshi.com/js/jquery-1.8.3.min.js"></script>
<script>
$(function () {
//自定义tap
$(document).on("touchstart", function (e) {
if (!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 0);
});
$(document).on("touchmove", function (e) {
if (!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 1);
});
$(document).on("touchend", function (e) {
if (!$(e.target).hasClass("disable") && $(e.target).data("isMoved") == 0) $(e.target).trigger("tap");
});

//按钮点击效果
$(document).on("touchstart", ".action-btn:not(.disable)", function (e) {
var $this = $(this);
var flag = true;
//遍历子类
$this.find("*").each(function () {
//查看有没有子类触发过active动作
if ($(this).hasClass("active")) flag = false;
});
//如果子类已经触发了active动作，父类则取消active触发操作
if (flag) $this.addClass("active");

});
$(document).on("touchmove", ".action-btn:not(.disable)", function (e) {
if ($(this).hasClass("active")) $(this).removeClass("active");
});
$(document).on("touchend", ".action-btn:not(.disable)", function (e) {
if ($(this).hasClass("active")) $(this).removeClass("active");
});

});
</script>
</body>
</html>

移动端模拟hover的更多相关文章

  1. chrome控制台模拟hover、focus、active等状态，方便调试

    有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...

  2. 移动端:active,:hover无法很好触发动画的解决方案

    移动端:active,:hover无法很好触发动画的解决方案 1:问题环境: 用css3定义了一个动画,使用:hover伪类调用动画时在移动端不能很好的进行动画. 2:解决方案: 定义一个open类, ...

  3. 在pc游览器端模拟移动端幻灯片

    用简单的思路写了下pc端模拟web端的图片滑动效果... 效果卡,bug多,完毕,继续学习c3方法写这个,iscroll就是可以模拟这种效果,还在学习中,难点<触点判断> 代码一份 < ...

  4. 基于fiddler的APP抓包及服务端模拟

    在HTTP接口的测试过程中,一般我们会按照如下的步骤进行: 1)测试环境的准备 2)HTTP消息体的构造 3)HTTP消息的发送及断言 如果我们可以拿到项目组的接口文档,并且HTTP后台服务是可以工作 ...

  5. [转]基于fiddler的APP抓包及服务端模拟

    在HTTP接口的测试过程中,一般我们会按照如下的步骤进行: 1)测试环境的准备 2)HTTP消息体的构造 3)HTTP消息的发送及断言 如果我们可以拿到项目组的接口文档,并且HTTP后台服务是可以工作 ...

  6. 怎么在移动端模拟pc端进行web开发调试日志

    由于移动端开发,许多地方需要进行手势交互开发,而在pc模拟手机浏览器中不能进行模拟手势,所以无法查看日志,于是网上找了一个,腾讯vConsole,感觉还可以,分享给大家安装也方便 我的项目是基于vue ...

  7. IoTClient开发4 - ModBusTcp协议服务端模拟

    前言 上篇我们实现了ModBusTcp协议的客户端读写,可是在很多时候编写业务代码之前是没有现场环境的.总不能在客户现场去写代码,或是蒙着眼睛写然后求神拜佛不出错,又或是在办公室部署一套硬件环境.怎么 ...

  8. PC端模拟手机浏览网页

    很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容. 谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器.在Windows的 ...

  9. PC端模拟移动端访问 字体大小限制

    审查元素(F12),调整为移动端,如下图所示: 在字体大小小于12px时,font-size就不起作用了. 在真实移动端设备上是起作用的.

随机推荐

  1. MVC, EF, Code First 相关问题总结

    1. 控制表名单复数: 在DbContext类中修改OnModelCreating()为: protected override void OnModelCreating(DbModelBuilder ...

  2. (KMP)Count the string -- hdu -- 3336

    http://acm.hdu.edu.cn/showproblem.php?pid=3336 Count the string Time Limit: 2000/1000 MS (Java/Other ...

  3. codeforces 702C Cellular Network 2016-10-15 18:19 104人阅读 评论(0) 收藏

    C. Cellular Network time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  4. 四则运算 Java 实现 刘丰璨，王翠鸾

    四则运算 GitHub仓库 功能实现 [x] 使用 -n 参数控制生成题目的个数,并且根据解空间限制用户设定的范围(如 range == 2 时,用户却要求生成 10000 道题目,这明显不合理) [ ...

  5. mongodb 命令行安装

    因为下载zip的文件速度快,所以就使用了zip,zip格式的解压完后需要使用命令行安装,步骤大致如下: 1,首先创建一个文件叫mongo的文件,里面包含了数据库存放的目录以及日志,然后在指定的目录下创 ...

  6. SSE sqrt还是比C math库的sqrtf快了不少

    #include <stdio.h> #include <xmmintrin.h> #define NOMINMAX #include <windows.h> #i ...

  7. Commons FileUpload文件上传组件

    Java实现的文件上传组件有好几种,其中最为“官方”的要数Apache Commons库中的FileUpload了吧. 页面 <form method="POST" enct ...

  8. Python实现汉诺塔问题的可视化（以动画的形式展示移动过程）

    学习Python已经有一段时间了,也学习了递归的方法,而能够实践该方法的当然就是汉诺塔问题了,但是这次我们不只是要完成对汉诺塔过程的计算,还要通过turtle库来体现汉诺塔中每一层移动的过程. 一.设 ...

  9. leetcode 120. 三角形最小路径和 JAVA

    题目: 给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上. 例如,给定三角形: [ [2], [3,4], [6,5,7], [4,1,8,3] ] 自顶向下的最小路径和 ...

  10. Sansa组件

    诉求 仿照admin组件,实现对表的URL分配管理. 实现思路 1.在settings.py文件中注册APP,注册示例为: 'app01.apps.App01Config', 'app02.apps. ...