图片跟随手指滑动

图片描述

想做这样一个效果，手指拖动图片，图片跟随移动，到达顶部，发送指令，提示成功在返回起点，未到达顶部，返回起点，有没有demo，之允许上划初学请教一下

阅读 3.9k

touch事件，给你个简单的事例吧，返回动画什么的你自己完成吧，我是直接返回的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;    
            }
            html{
                width: 100%;
                height: 100%;
            }
            body{
                width: 100%;
                height: 100%;
                position: relative;
                /* touch-action: none; */

            }
            .box{
                width: 100px;
                height: 100px;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                background: #000;
            }
        </style>
    </head>
    <body >
        <div class="box" id="box"></div>
    </body>
    <script>
        touch('box');
        function touch(id){
            var obj = document.getElementById(id); 
            obj.addEventListener('touchstart', function(event) { 
            // 如果这个元素的位置内只有一个手指的话 
            if (event.targetTouches.length == 1) { 
            var touch = event.targetTouches[0]; 
            // 把元素放在手指所在的位置 
            var disX=touch.pageX-obj.offsetLeft; 
            var disY=touch.pageY-obj.offsetTop;
            obj.addEventListener('touchmove',move);  
            function move(event){    
                //event.preventDefault();
                document.documentElement.style.touchAction = 'none';
                    var touch2=event.targetTouches[0];
                    //var l=touch2.pageX-disX;
                    var t=touch2.pageY-disY;
                    // if(l<0){
                    //     l=0;
                    // };
                    // if(l>document.documentElement.clientWidth-obj.offsetWidth){
                    //     l=document.documentElement.clientWidth-obj.offsetWidth
                    // };
                    if(t<0){
                        t=0;
                    };
                    if(t>document.documentElement.clientHeight-obj.offsetHeight){
                        t=document.documentElement.clientHeight-obj.offsetHeight;
                    };
                    //obj.style.left=l+'px';
                    obj.style.top=t+'px';
         
            };
              obj.addEventListener('touchend',chend);
              function chend(event){
                if(obj.offsetTop<150){
                    alert('成功');
                    obj.style.top='auto';
                    obj.style.bottom='0px';
                }else{
                    obj.style.top='auto';
                    obj.style.bottom='0px';
                };
                document.documentElement.style.touchAction = 'auto';
                obj.removeEventListener('touchmove',move);
                obj.removeEventListener('touchend',chend);
              };
        }; 
        }, false);
    };
    </script>
</html>

图片跟随手指滑动

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

图片跟随手指滑动

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？