一个滑动小块 

<!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; background: #999; width: 500px; top: 100px; left: 50%; margin-left: -250px;}
.lineDiv .minDiv{ position: absolute; top:-5px; left: 0; width: 15px; height: 15px; 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 x= e.clientX;//鼠标的X 坐标
                var x1= e.pageX;
                var lineDiv_left=getPosition(lineDiv).left;
                var minDiv_left=(x-lineDiv_left)-5;
                if(minDiv_left>lineDiv.offsetWidth-5){
                    minDiv_left=lineDiv.offsetWidth-5;
                }
                if(minDiv_left<0){
                    minDiv_left=0;
                }
                minDiv.style.left=minDiv_left+"px";
                document.title=x+","+x1;

            }
        }
        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>

 offsetwidth是获取对象的宽度

clientX 鼠标的X 坐标。
offsetParent ：属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 
如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 
当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null 。 

 
posted @ 2015-07-21 15:31  328201736  阅读(167)  评论(0)    收藏  举报