拖动小块效果 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖动小块效果</title>
</head>
<style type="text/css">
.lineDiv{ position: absolute; height: 5px; font-size: 0; line-height: 0;  width: 30px; top: 0px; left: 0%; margin-left:0px;}
.lineDiv .minDiv{ position: absolute; top:-5px; left: 0; width: 30px; height: 30px; background: #000; cursor: pointer;}
</style>
<body>

<div id="lineDiv" class="lineDiv">
    <div id="minDiv" class="minDiv"></div>
</div>
</body>
</html>

<script type="text/javascript">


    window.onload=function(){
        function g(id){ return document.getElementById(id)}
        var lineDiv=g("lineDiv");
        var minDiv=g("minDiv");
        var ifBool=false; //是否安下
       minDiv.onmousedown=function(e){
            e.stopPropagation();
            ifBool=true;
        }

        window.onmousemove=function(e){
            e.stopPropagation();
            if(ifBool==true){

                var bodyW=document.body.clientWidth||document.documentElement.clientWidth;
                var bodyH=document.body.clientHeight||document.documentElement.clientHeight;

                var x= e.clientX;
                var y= e.clientY;
                var lineDiv_left=getPosition(lineDiv).left;
                var lineDiv_top=getPosition(lineDiv).top;

                var minDiv_left=(x-lineDiv_left);
                var minDiv_top=(y-lineDiv_top);

                if(x<0){
                    minDiv_left=0
                }
                if(minDiv_left>bodyW-30){

                    minDiv_left=bodyW-15;
                }

                if(y<0){
                    minDiv_top=0
                }

                if(minDiv_top>bodyH-30){
                    minDiv_top=bodyH-30;
                }
                // document.title=lineDiv_left"+,+"
                minDiv.style.left=minDiv_left+"px";
                minDiv.style.top=minDiv_top+"px";
           }
        }
        window.onmouseup=function(){
            ifBool=false;
        }

        function getPosition(node){
            var left=node.offsetLeft;
            var top=node.offsetTop;
            current=node.offsetParent;
            while(current!==null){
                 left+=current.offsetLeft;
                 top+=current.offsetTop;
                 current=current.offsetParent;
            }
            return{"left":left,"top":top}
        }


    }




</script>

 

$("html").bind("touchmove",function(e){
$("body",this).html(e.originalEvent.changedTouches[0].pageX)

})

 

posted @ 2015-07-21 17:56  328201736  阅读(201)  评论(0)    收藏  举报