<!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; 500px; top: 100px; left: 50%; margin-left: -250px;}
.lineDiv .minDiv{ position: absolute; top:-5px; left: 0; 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 。