js开发 手机触摸和移动移动效果的使用

复制代码
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .out{
          
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            box-sizing: border-box;
        }
        .box{
            /* 定位元素必须要加,因为这个原理是针对top,left不断赋值移动的 */
            position: absolute; 
            left: 0;
            top: 0;
            width:50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="box"></div>
    </div>
    <script>
        var out = document.querySelector('.out');
        var box = document.querySelector('.box');
        box.addEventListener('touchstart',function(e){
            //手指触摸的初始距离
            var beginX =e.targetTouches[0].pageX;
            var beginY =e.targetTouches[0].pageY;
            // 盒子的初始位置
            var bxbeginX = this.offsetLeft;
            var bxbeginY = this.offsetTop;
    
            box.addEventListener('touchmove',function(e){
                // 事件是手指移动触发产生的的移动的距离
                // 此时的.targetTouches[0].pageX >beginX 
                // e.targetTouches[0].pageX -beginX ;就得到了手指移动的距离
                var movex = e.targetTouches[0].pageX -beginX;
                var moveY = e.targetTouches[0].pageY - beginY;
                // 初始位置假如是0,此时移动了1厘米,
                this.style.left=  bxbeginX+ movex +'px';

                this.style.top =  bxbeginY + moveY+'px';
                e.preventDefault();
                // 阻止屏幕滚动的默认行为
            })
            
        })
    </script>
</body>
</html>
复制代码

 

posted @   嘉琦  阅读(105)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示