<!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. （网络流） Sabotage -- UVA -- 10480

    链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82835#problem/J 代码: #include<cstdio> ...

  2. Ansible免密码登陆

    配置Linux主机无密码访问 生成秘钥 ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in which to ...

  3. LINUX中关于SIGNAL的定义

    /* Signals. */ #define SIGHUP 1 /* Hangup (POSIX). */ #define SIGINT 2 /* Interrupt (ANSI). */ #defi ...

  4. 日期类的加减及java中所以日期类的操作算法大全

    1.计算某一月份的最大天数 1Calendar time=Calendar.getInstance();2time.clear();3time.set(Calendar.YEAR,year); //y ...

  5. RequestHelper

    Request["param"] 全部 Request.QueryString["param"] get Request.Form["param&qu ...

  6. [LeetCode 总结帖]: 链表专题

    链表在笔试面试中都是出镜率极高的一种数据结构. 由于链表具有结构简单,代码量较少,变化多,可以较为全面的考察应聘者的逻辑思考能力以及应变能力的特点,而备受面试官青睐. 在本节中,我将Leetcode中 ...

  7. ABP 框架代码批量生成器

    需要最新源码,或技术提问,请加QQ群:538327407 我的各种github 开源项目和代码:https://github.com/linbin524 简介 用abp 框架快两年了,用它完成了多个项 ...

  8. Django 一些少用却很实用的orm查询方法

    一.使用Q对象进行限制条件之间 "或" 连接查询 from django.db.models import Q from django.contrib.auth.models im ...

  9. 用0x077CB531计算末尾0的个数

    http://www.matrix67.com/blog/archives/3985 unsigned int v;  // find the number of trailing zeros in ...

  10. Flask从入门到精通之跨站请求伪造保护

    默认情况下,Flask-WTF 能保护所有表单免受跨站请求伪造(Cross-Site Request Forgery,CSRF)的攻击.恶意网站把请求发送到被攻击者已登录的其他网站时就会引发CSRF ...