今天在公司遇到做一个移动端手指滑动的效果,刚开始用了swiper.js插件发现效果不好(文字存在模糊效果)。后来查了一些资料,自己手写了一个使用原生js写的滑动效果。
下面直接上代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <title>Document</title> <style> #id { width: 1150px; height: 150px; background: red; position: absolute; left: 0px; } .id { width: 40px; height: 150px; background: green; border: solid 1px grey; float: left; } </style> </head> <body> <div id="inp"></div> <div id="id" style="left:0px;"> <div class="id">1</div> <div class="id">2</div><div class="id"></div><div class="id"></div><div class="id"></div><div class="id"></div> </div> </body> <script> function load (){ /*单指拖动*/ var obj = document.getElementById('id'); obj.addEventListener("touchstart", function(event) { var touch = event.targetTouches[0]; var left = parseInt(obj.style.left); // alert(left); var x = touch.pageX - left; var y = touch.pageY - left; obj.addEventListener('touchmove', function(event) { // 如果这个元素的位置内只有一个手指的话 if (event.targetTouches.length == 1) { event.preventDefault(); // 阻止浏览器默认事件,重要 var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 obj.style.left = touch.pageX - x + 'px'; // obj.style.top = touch.pageY + 'px'; } }, false); }); obj.addEventListener("touchend",function(){ obj.removeEventListener("touchstart"); obj.removeEventListener("touchmove"); }); } window.addEventListener('load',load, false); </script> </html>
版权声明:本文为博主原创文章,未经博主允许不得转载。
原文地址:http://blog.csdn.net/u012763269/article/details/46881291