<!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. 2、WindowManager源码分析--最后一战

    在最后一站中,几乎所有的UI界面都是这个WindowManager管理的,那么他是如何调度的呢?我们来看看一些项目中的界面. 上面有登陆界面,专门管理登陆.战斗界面,用户界面,专门管理用户属性等等. ...

  2. C++ 引用 指针 使用举例

    1. 请看下程序 inline void CScanLineFill::removeOldNodeAET(AET* &aetList, const float yCurrent) { AET* ...

  3. [svn] TortoisSVN的Blam功能

    团队开发中,我们必须要面对多个人对同一个文件进行修改的情况. 多人修改同一文件,往往就会发生很多的问题,或者随着文件中代码的数量不断增加.当我们必须要使用文件中的其他人写的代码,或者代码发生bug之后 ...

  4. Android 一个应用多个桌面图标

    理解android.intent.action.MAIN 与 android.intent.category.LAUNCHER: 在Android 应用程序开发过程中,Activity入口会增加: a ...

  5. Maven发布和管理项目

    1 什么是Maven? 如果没有Maven,你可能不得不经历下面的过程: 1 如果使用了spring,去spring的官网下载jar包:如果使用hibernate,去hibernate的官网下载Jar ...

  6. C# TinyMapper

    https://github.com/TinyMapper/TinyMapper 据说性能蛮高的,我没对比测试过. NuGet安装下. 新增三个实体. public class A { public ...

  7. Caliburn.Micro（MVVM框架）

    一.首启窗体设置 1. 创建一个新的WPF应用程序并添加NuGet包:Caliburn.Micro 2. 删除项目自带的主窗口文件MainWindow.xaml 3. 在App.xaml项目文件中,删 ...

  8. CodeForces 540C Ice Cave （BFS）

    http://codeforces.com/problemset/problem/540/C       Ice Cave Time Limit:2000MS     Memory Limit:262 ...

  9. PropertyPlaceHolderConfigurer中的location是不是用错了?

    本文由作者张远道授权网易云社区发布. spring中常用PropertyPlaceHolderConfigurer来读取properties配置文件的配置信息.常用的配置方式有两种,一种是使用loca ...

  10. Kafka文件存储机制

    一.topic中partition存储分布 在本地的kafka中,我们只启动一个broker,创建两个topic:single-todo和single-todo-vip ,每个topic有两个part ...