PC 拖动 以百分比计算

 

<!doctype html>
<html>
<head>
    <meta charset='utf-8' />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>兼容手机与PC 拖动 以百分比计算  </title>
</head>

<body>
<div style="width:500px;  height:500px; border:1px solid #ccc; position:relative;  margin:0 auto">
<div id="oDiv" style="width:100px;height:100px;background-color:red;position:absolute; top:0; left:0; cursor: pointer"></div>
</div>

<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script>
    var oMask = document.getElementById('oDiv');
    var oDiv=$("#oDiv");
    var oDivW=oDiv.width()/2;
    var ifKey=false;
    oDiv.on("mousedown", down);
    oDiv.on("mousemove", move);
    oDiv.on("mouseout mouseup", up);
    //  oMask.addEventListener("touchmove", move)

    function down(e){
        e.preventDefault();
        e.stopPropagation();
        ifKey=true;

    }
    function up(e){
        e.preventDefault();
        e.stopPropagation();
        ifKey=false;

    }

    function move(e) {
        var bodyW=500;
        var bodyH=500;

        if(ifKey==true){
            e.preventDefault();//阻止其他事件
            // e.preventDefault();
            // 如果这个元素的位置内只有一个手指的话
           if(e.type=="mousemove"){
                var ox= e.clientX-bodyW-oDivW;
                var oy= e.clientY;
                document.title=(oy);
            if(ox<50){
                    ox=50;
                    
                }else if(ox>450){
                    ox=450
                    
                }
                
                if(oy<50){
                    oy=50;
                    }else if(oy>450){
                            oy=450;
                        }
                    
                
                var bfX=(ox-oDivW)*0.2;
                var bfy=(oy-oDivW)*0.2;
                oMask.style.left=(bfX)+"%";
                oMask.style.top=(bfy)+"%";
                

            }
        }

    }

</script>
</body>
</html>

 

posted @ 2015-09-16 11:26  328201736  阅读(293)  评论(0)    收藏  举报