JS触摸拖动div的移动，类似拖动电子地图

<body style="overflow:hidden">
    <div class="stage">
        <div class="content">
            <img src="images/timg.jpeg" alt="">
        </div>
        <div class="roles">
            <div class="roleOne">
                <img src="images/mengpo.png" alt="">
            </div>
        </div>
    </div>

    <style>
    .stage{width: 100%; overflow: hidden;position: relative;}
    .content{width: 2826px; height: 1842px; 
        /* transition: margin-left 0.2s 0s; */
    }
    .content img{display: block; width: 100%;height: 100%;}
    .roles, .roleOne{width: 60px; height: 60px; position: fixed; left: 30px; bottom: 30px;}
    .roleOne img{width: 100%; height: 100%;}
    </style>

    <script>
    var stage = document.querySelector(".stage");
    stage.style.height = document.body.clientHeight; //获取视图的高度

    var content = document.querySelector(".content");
    // content.style.marginLeft = "0px";
    var contentWidth    = 2826;
    var contentHeight   = 1842;
    var contentWidthEdge    = contentWidth - document.documentElement.clientWidth;
    var contentHeightEdge   = contentHeight - document.documentElement.clientHeight;

    console.log(document.documentElement.clientHeight + " "+ document.documentElement.clientWidth);

    var start   = {x:0,y:0}; //滑动的起始坐标
    var end     = {x:0,y:0}; //滑动停止坐标
    var offset  = {x:0,y:0}; //偏移
    var marginLeft = "0px";
    var marginTop = "0px";

    function startAction(event){
        start.x = event.touches[0].clientX;
        start.y = event.touches[0].clientY;
        // console.log(start);
    }

    function move(event){
        // event.preventDefault();

        end.x = event.touches[0].clientX;
        end.y = event.touches[0].clientY;
        // console.log(end);

        offset.x = end.x - start.x;
        offset.y = end.y - start.y;

        start.x = end.x;
        start.y = end.y;

        marginLeft = isNaN( parseInt(content.style.marginLeft) ) ? 0 : parseInt(content.style.marginLeft);
        marginLeft = marginLeft + offset.x;
        if(marginLeft > 0 || marginLeft <= -contentWidthEdge){

        }else{
            content.style.marginLeft = marginLeft + "px";
        }

        marginTop = isNaN( parseInt(content.style.marginTop) ) ? 0 : parseInt(content.style.marginTop);
        marginTop = marginTop + offset.y;
        if(marginTop > 0 || marginTop <= -contentHeightEdge){

        }else{
            content.style.marginTop = marginTop + "px";
        }
        console.log("offset.x: "+offset.x+", marginLeft: "+marginLeft + " marginTop: "+marginTop);
    }

    // setInterval(function(){
    //     content.style.marginTop = "-300px";
    //     content.style.marginLeft = "-300px";
    // },3000);

    window.onload = function(){
        var stage = document.querySelector(".stage");
        console.log(stage);

        document.addEventListener("touchstart", startAction);
        document.addEventListener("touchmove", move);
        document.addEventListener("touchend", function(){
            console.log("滑动结束！");
        });

    }
    </script>
</body>

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏