js特效之页面侧滑

 1 var initX; //触摸位置
 2 var moveX; //滑动时的位置
 3 var X = 0; //移动距离
 4 window.addEventListener('touchstart', function (event) {
 5     event.preventDefault();
 6     var obj = event.target;
 7     if (obj.className == "list-li") {
 8         initX = event.targetTouches[0].pageX;
 9     }
10     window.addEventListener('touchmove', function (event) {
11         event.preventDefault();
12         event.stopPropagation();
13         var obj = event.target;
14         if (obj.className == "list-li") {
15             moveX = event.targetTouches[0].pageX;
16             X = moveX - initX;
17             if (X >= 0) {
18                 obj.style.WebkitTransform = "translateX(" + 0 + "px)";
19             } else if (X < 0) {
20                 obj.style.WebkitTransform = "translateX(" + -80 + "px)";
21             }
22         }
23     });
24 })
posted on 2018-05-11 09:58 jovelove 阅读(404) 评论(0) 收藏举报