zoukankan      html  css  js  c++  java
  • 移动端的手势事件

    功能:

    元素跟着鼠标动

    代码:

              <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>



      

  • 相关阅读:
    python locust 性能测试:locust安装和一些参数介绍
    输入一串字符,检查是否可以组成friend
    Django基础
    JQuery基础
    Javascript基础
    CSS基础
    HTML基础
    MYSQL数据库
    I/O模型
    协程-----Coroutine
  • 原文地址:https://www.cnblogs.com/LWJ-booke/p/7099201.html
Copyright © 2011-2022 走看看