圖片跟隨手指滑動

圖片描述

想做這樣一個效果，手指拖動圖片，圖片跟隨移動，到達頂部，發(fā)送指令，提示成功在返回起點，未到達頂部，返回起點，有沒有demo，之允許上劃初學請教一下

回答

編輯回答

孤影

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>

2018年5月16日 08:53

編輯回答