<!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>
效果如下：
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>
效果如下：
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>
效果如下：
4、Rotate
代码如下：