移动端的手势事件

功能:

元素跟着鼠标动

代码:

          <style type="text/css">
			p{
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
         <p>212313</p>

          <script>

        var startY,endY,startX,endLeft,endTop;
        var p=document.getElementsByTagName('p')[0];
        p.addEventListener('touchstart',function(e){//开始事件
        startX=e.changedTouches[0].clientX;//获取开始的屏幕横坐标
        startY=e.changedTouches[0].clientY;//获取开始的屏幕纵坐标
        endLeft=parseInt(getComputedStyle(p).left);//获取元素当前的屏幕横坐标
        endTop=parseInt(getComputedStyle(p).top);//获取元素当前的屏幕横坐标
        })
        p.addEventListener('touchmove',function(e){//移动过程
        endX=e.changedTouches[0].clientX;//获取结束的屏幕横坐标
        endY=e.changedTouches[0].clientY;//获取结束的屏幕纵坐标
        p.style.left=endX-startX+endLeft+'px';//给元素left重新赋值,元素一定要定位
        p.style.top=endY-startY+endTop+'px';
        })


          </script>



  

posted @ 2017-06-30 15:45  LWJ_jay  阅读(236)  评论(0编辑  收藏  举报