<body>
<div id="div1">
</div>
<script type="text/javascript">
window.onload=function(){
// var oDiv=document.getElementById('div1');
var oDiv=document.querySelector('#div1')
console.log(oDiv)
var iSpeedX=0;
var iSpeedY=0;
var lastX=0;
var lastY=0;
var timer=null;
//div的鼠标按下事件,主要计算鼠标当前位置,和移动位置。这样可以计算出鼠标移动速度。
oDiv.onmousedown=function(ev){
var oEvent=ev || event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
clearInterval(timer);
document.onmousemove=function(ev){ //鼠标拖动事件。
var oEvent=ev || event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
iSpeedX=oEvent.clientX-lastX;
iSpeedY=oEvent.clientY-lastY;
lastX=oEvent.clientX;
lastY=oEvent.clientY;
}
document.onmouseup=function(){ //当鼠标抬起后,清掉移动事件。
document.onmousemove=null;
document.onmouseup=null;
oDiv.releaseCapture && oDiv.releaseCapture();
startMove();
}
oDiv.setCapture && oDiv.setCapture();
return false;
}
function startMove(){ //移动函数,主要操作是计算鼠标移动速度和移动方向。
clearInterval(timer);
timer=setInterval(function(){
iSpeedY+=3;
var t=oDiv.offsetTop+iSpeedY;
var l=oDiv.offsetLeft+iSpeedX;
if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offsetHeight;
iSpeedY*=-0.8;
iSpeedX*=0.8;
}
if(t<0){
t=0;
iSpeedY*=-0.8;
iSpeedX*=0.8;
}
if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
iSpeedX*=-0.8;
iSpeedY*=0.8;
}
if(l<0){
l=0;
iSpeedX*=-0.8;
iSpeedY*=0.8;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
if(Math.abs(iSpeedX)<1)iSpeedX=0;
if(Math.abs(iSpeedY)<1)iSpeedY=0;
if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){
clearInterval(timer);
}
document.title=l++;
},30);
}
};
</script>
</body>