移动端脚本框架Hammer.js(2)

<!DOCTYPE html> <html> <head> <meta content="width=device-width" /> <title>Pan</title> <script src="https://www.jb51.net/Script/hammer.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .test { width: 100%; height: 50%; background: #ffd800; text-align: left; } .result { width: 100%; height: 50%; background: #b6ff00; text-align: left; } </style> </head> <body> <div>事件区域</div> <div>事件结果<br /></div> <script type="text/javascript"> //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 var hammertime = new Hammer(document.getElementById("test")); //添加事件 hammertime.on("pan", function (e) { document.getElementById("result").innerHTML += "X偏移量:【" + e.deltaX + "】,Y偏移量:【" + e.deltaY + "】<br />"; //控制台输出 console.log(e); }); </script> </body> </html>

效果如下:

移动端脚本框架Hammer.js

2、Pinch

代码如下:

<!DOCTYPE html> <html> <head> <meta content="width=device-width" /> <title>Pinch</title> <script src="https://www.jb51.net/Script/hammer.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .test { width: 100%; height: 50%; background: #ffd800; text-align: left; } .result { width: 100%; height: 50%; background: #b6ff00; text-align: left; } </style> </head> <body> <div>事件区域</div> <div>事件结果:捏合触发<br /></div> <script type="text/javascript"> //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 var hammertime = new Hammer(document.getElementById("test")); //为该dom元素指定触屏移动事件 hammertime.add(new Hammer.Pinch()); //添加事件 hammertime.on("pinchin", function (e) { document.getElementById("result").innerHTML += "捏合初触发<br />"; //控制台输出 console.log(e); }); </script> </body> </html>

效果如下: 

移动端脚本框架Hammer.js

3、Press

代码如下:

<!DOCTYPE html> <html> <head> <meta content="width=device-width" /> <title>Press</title> <script src="https://www.jb51.net/Script/hammer.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .test { width: 100%; height: 50%; background: #ffd800; text-align: left; } .result { width: 100%; height: 50%; background: #b6ff00; text-align: left; } </style> </head> <body> <div>事件区域</div> <div>事件结果:按压超过500ms触发<br /></div> <script type="text/javascript"> //创建一个新的hammer对象并且在初始化时指定要处理的dom元素 var hammertime = new Hammer(document.getElementById("test")); //添加事件 hammertime.on("press", function (e) { document.getElementById("result").innerHTML += "超过500ms了<br />"; //控制台输出 console.log(e); }); </script> </body> </html>

效果如下:

移动端脚本框架Hammer.js

4、Rotate

代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwfgxy.html