<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.father{width:500px;height:30px;border:1px solid #ccc;margin:50px auto 0;position:relative;}
.son{width:30px;height:30px;background: #f00;position:absolute;top:0;left:0;}
.brother{width:500px;height:480px;background: #f23;margin:20px 0 0 280px;}
</style>
</head>
<body>
<div class="father" id="father">
<div class="son" id="son"></div>
</div>
<div class="brother" id="brother"></div>
<script>
var oSon = document.getElementById('son');
var oF = document.getElementById('father');
var oB = document.getElementById('brother');
var W = oF.offsetWidth-oSon.offsetWidth
oSon.onmousedown=function(ev){
var evt = ev||event;
var disX = evt.offsetX;
var disY = evt.offsetY;
document.onmousemove=function(ev){
var evt=ev||event;
var mX = evt.clientX;
var mY = evt.clientY;
var l=mX-oF.offsetLeft-disX;
// var t=mY-oF.offsetTop-disY;
if(l<=0){
l=0;
}else if(l>=W){
l=W;
}
oSon.style.left=l+"px";
var w=500*l/W;
oB.style.width=w+"px";
oB.style.height=480*l/W+"px";
// oSon.style.top=t+"px";
return false;
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
</script>
</body>
</html>
加油 !