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>



      

  • 相关阅读:
    CA证书扫盲,https讲解。
    关于jquery的入门,简单的封装。
    anglar JS使用两层ng-repeat嵌套使用,分辨$index
    JS中=>,>>>是什么意思
    撰写html标签的快捷方式2
    CSS 中伪类的顺序
    撰写html标签的快捷方式1
    文字换行显示
    input 控件监听回车确认按钮。
    git常用命令整理
  • 原文地址:https://www.cnblogs.com/LWJ-booke/p/7099201.html
Copyright © 2011-2022 走看看