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 属性适用于 ...
随机推荐
- react小结
react基础小结 1. 例子 import React from 'react' import { render } from 'react-dom' // 定义组件 class Hello ext ...
- javaweb下载文件模板
import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import javax ...
- 2n皇后问题
此题为蓝桥杯基础练习题. 问题描述 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后和n个白皇后,使任意的两个黑皇后都不在同一行.同一列或同一条对角线上,任意的两个白皇后 ...
- zabbix客户端一键安装脚本(主动模式监控)
#!/bin/bash basepath=$(cd `dirname $0`; pwd)SHELL_DIR="${basepath}/shell"PACKAGE_DIR=" ...
- iperf命令
iperf命令网络测试 iperf命令是一个网络性能测试工具.iperf可以测试TCP和UDP带宽质量.iperf可以测量最大TCP带宽,具有多种参数和UDP特性.iperf可以报告带宽,延迟抖动和数 ...
- js到底new了点啥
在最开始学习js的时候,我看书上写着,创建一个数组,一个对象通常使用new,如下: var arr=new Array(),//arr=[] obj=new Object();//obj={} 到了后 ...
- Python 脚本实现对 Linux 服务器的监控
本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 原文地址 由于原文来自微信公众号,并且脚本都是图片,所以这里 ...
- C# decimal 去掉小数点后的无效0
c#去掉小数点后的无效0 decimal d = 0.0500m; d.ToString("0.##")就出来了 也可以这样 string.Format("{0:0.## ...
- ASP.NET Core的身份认证框架IdentityServer4--(2)API跟WEB端配置
API配置 可以使用ASP.NET Core Web API模板.同样,我们建议您控制端口并使用与之前一样的方法来配置Kestrel和启动配置文件.端口配置为http://localhost:5001 ...
- 如何通过以太坊智能合约来进行众筹（ICO）
前面我们有两遍文章写了如何发行代币,今天我们讲一下如何使用代币来公开募资,即编写一个募资合约. 写在前面 本文所讲的代币是使用以太坊智能合约创建,阅读本文前,你应该对以太坊.智能合约有所了解,如果你还 ...