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>

 

修改时间 2018-04-26

真诚赞赏,手留余香
赞赏
随机推荐
使用 sqlmap 检测 SQL 注入漏洞
AI 制作的图标上传到 iconfont 以后丢失描边的解决办法
Windows Server 服务器防止远程桌面暴力破解
JavaScript 链表
阿里云ECS磁盘扩容
filezilla server FTP 安装报错 "could not load TLS network. Aborting start of administration interface"
npm国内镜象设置的三种方法
Android Studio 和 JDK 版本
Mac OS原来自带了apache,基本用法总结
js获取url参数值的两种方式