jQuery拓展简易快速实现触摸效果
1、js代码
//触摸开始事件，改变元素的样式
function touchstart(e) {
$(this).removeClass("touchend").addClass("touchstart");
if (e.data.cancelBubble) {
if (e.cancelBubble) {
e.cancelBubble = true;
}
if (e.stopPropagation()) {
e.stopPropagation();
}
}
}
//触摸结束事件，恢复元素样式
function touchend(e) {
$(this).addClass("touchend").removeClass("touchstart");
if (e.data.cancelBubble) {
if (e.cancelBubble) {
e.cancelBubble = true;
}
if (e.stopPropagation()) {
e.stopPropagation();
}
}
}
$.extend({
//注册全局触摸事件，委托给document，只要在需要实现触摸效果的元素上加上 touchable类即可
globalTouchable: function () {
$.disableGlobalTouchable();
$(document)
.on("touchstart mousedown mouseenter", ".touchable", {}, touchstart)
.on("touchend touchcancel mouseup mouseleave", ".touchable", {}, touchend);
return this;
},
disableGlobalTouchable: function () {
$(document)
.off("touchstart mousedown mouseenter", ".touchable", touchstart)
.off("touchend touchcancel mouseup mouseleave", ".touchable", touchend);
return this;
}
});
$.fn.extend(
{
/*
* 启用匹配元素的触摸效果，
*cancelBubble:
* 是否取消事件冒泡，避免父元素出现触摸效果
*/
touchable: function (cancelBubble) {
$(this)
.addClass("touchable")
.off("ouchstart mousedown mouseenter", null, touchstart)
.off("touchend touchcancel mouseup mouseleave", null, touchend)
.on("touchstart mousedown mouseenter", null, { cancelBubble: cancelBubble }, touchstart)
.on("touchend touchcancel mouseup mouseleave", null, { cancelBubble: cancelBubble }, touchend);
return this;
},
/*
*取消匹配元素的触摸效果
*/
untouchable: function () {
$(this)
.off("ouchstart mousedown mouseenter",null, touchstart)
.off("touchend touchcancel mouseup mouseleave", null, touchend);
return this;
},
});
2、css代码
.touchable{
background-color:whitesmoke;
}
/*点击时颜色*/
.touchable.touchstart{
background-color:gainsboro;
}
/*淡出效果*/
.touchable.touchend{
transition:background-color ease-out 0.3s;
}
3、使用示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Touchable</title>
<link href="~/css/touchable.css" rel="stylesheet" />
<style>
html, body {
width: 100%;
height: 100%;
} body {
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
body > div {
width: 60vw;
height: 20vh;
display:flex;
align-items:stretch;
}
body > div > div {
flex:1;
border:solid 1px white;
padding:2rem;
}
body > div > div > div {
padding:2rem;
height:100%;
width:100%;
background-color:green;
}
body > div > div > div >div{
padding: 2rem;
height: 100%;
width: 100%;
background-color:yellow;
}
</style> </head>
<body>
<div>
<div class="touchable"></div>
<div class="touchable"></div>
<div class="touchable"></div>
</div>
<div>
<div class="touchable"></div>
<div class="touchable"></div>
<div class="touchable"></div>
</div>
<div>
<div class="touchable"></div>
<div class="touchable"></div>
<div class="touchable"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="~/js/touchable.js?v=9"></script>
<script>
$.globalTouchable();
</script>
</body>
</html>
效果图
jQuery拓展简易快速实现触摸效果的更多相关文章
- jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- jquery 仿手机屏幕切换界面效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery实现鼠标经过图片变亮效果
在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- jQuery文本段落展开和折叠效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- jQuery对json快速赋值
jQuery对json快速赋值,重点在于将input的id取跟JSON同样的名称. <!DOCTYPE html> <html> <head lang="en& ...
- JQuery实现的模块交换动画效果
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- jQuery鼠标悬停内容动画切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
随机推荐
- 在C#中“？”有三种用法
在C#中“?”有三种用法. 1.可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空,例如:string str=null;是正确的.int i=null:编译器将 ...
- Java的一些良好习惯及细节------持续更新中...
1.在做条件判断时,不要将变量放在判断符的左边,这样做可以防止出现空指针异常,以字符串比较为例: String name = "Tom"; //这种方式不推荐,如果变量name为空 ...
- HttpGet HttpPost
public string HttpGet(string Url, string postDataStr) { HttpWebRequest request = (HttpWebRequest)Web ...
- C++函数返回值发生的对象复制
最近用QT做一个监控系统的项目,需要显示目标的运动轨迹,每次目标移动后,就在目标的轨迹中(用vector记录)添加一条新轨迹. 但是在运行中画面里一直不出现轨迹,经过调试发现是记录轨迹的函数出错了. ...
- mac攻略(3) -- brew使用
[http://www.cnblogs.com/redirect/p/6131642.html] 1.介绍 brew是一个软件包管理工具,类似于centos下的yum或者ubuntu下的apt-get ...
- Xen的虚拟化详解
最近在看Xen在2003年发表在sosp上的论文<Xen and the Art of Virtualization>,中途遇到一些不理解的技术点,在网络上查找相关资料,发现大多数人都只是 ...
- bzoj 2120 带修改莫队
2120: 数颜色 Time Limit: 6 Sec Memory Limit: 259 MBSubmit: 7340 Solved: 2982[Submit][Status][Discuss] ...
- Eclipse (eclipse-jee-luna-SR2-win32)4.4.2 , jdk1.7, pydev 4.5.5版本的 完成的python环境集成
说明: 下面的搭建python2.x环境需要的条件: jdk1.7 eclipse(版本小于4.5) pydev(版本小于5.0) Eclipse和PyDev搭建完美Python开发环境 Window ...
- 史上最全的FTP网址
无帐号密码的为匿名登录 ftp://202.114.1.121 ftp://202.114.10.199 ftp://warez:cn.ftp@202.114.12.174 ftp://Music2: ...
- nodejs的基础概念
1.node 安装与相关配置. 2.Node.jsREPL(交互式解释器) 类似于控制台,可以输入命令,并接受系统的响应. REPL 的功能: 1.读取:读取用户输入,解析输入的 js 数据结构,并存 ...