利用物体运动最后两点之间的距离作为速度,每次碰撞速度乘以一个小于1的数来模拟摩擦力并乘以-1使之向反方向运动!拖动滚动条自动下坠
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ position:relative; height:5000px;}
.div1{ width:100px; height:100px; position:absolute; left:0;top:200px;}
h1{ text-align:center;}
</style>
<script type="text/javascript">
window.οnlοad=function()
{
var oDiv=document.getElementById('div1')
var nClientW=document.documentElement.clientWidth //获取可视宽
var nClientH=document.documentElement.clientHeight //获取可视高
var nScrollT=document.documentElement.scrollTop||document.body.scrollTop //可滚动高度
oDiv.style.left=(nClientW-oDiv.offsetWidth)/2+'px'
var timer=null
var oLeft=0
var oTop=0
var L=0
var T=0
var speedX=0
var speedY=0
starmove(oDiv)
window.οnscrοll=function()
{
nClientH=document.documentElement.clientHeight ||document.body.scrollTop //获取可视高
nScrollT=document.documentElement.scrollTop||document.body.scrollTop //可滚动高度
starmove(oDiv)
}
oDiv.οnmοusedοwn=function(ev)
{
clearInterval(timer)
var ev=ev||window.event
var disX=ev.clientX-oDiv.offsetLeft //获得按下点与div左边距
var disY=ev.clientY-oDiv.offsetTop //获得按下点与div上边距
var oldX=ev.clientX
var oldY=ev.clientY
document.οnmοusemοve=function(ev)
{
var ev=ev||window.event
speedX=ev.clientX-oldX //最近两点之间的距离作为速度
speedY=ev.clientY-oldY
oLeft=ev.clientX-disX //拖动后div的left
oTop=ev.clientY-disY //拖动后div的top
oldX=ev.clientX
oldY=ev.clientY
if(oLeft<0)
{
oLeft=0
}
else if(oLeft>nClientW-oDiv.offsetWidth)
{
oLeft=nClientW-oDiv.offsetWidth
}
if(oTop<0)
{
oTop=0
}
else if(oTop>nClientH-oDiv.offsetHeight)
{
oTop=nClientH-oDiv.offsetHeight
}
oDiv.style.left=oLeft+'px'
oDiv.style.top=oTop+'px'
if(oDiv.setCapture)
{
oDiv.setCapture()
}
}
document.οnmοuseup=function()
{
document.οnmοusemοve=null
document.οnmοuseup=null
if(oDiv.releaseCapture)
{
oDiv.releaseCapture()
}
starmove(oDiv)
}
return false;
}
function starmove(obj)
{
clearInterval(timer)
timer=setInterval(function(){
speedY+=3
L=obj.offsetLeft+speedX
T=obj.offsetTop+speedY
if(L<=0)
{
L=0
speedX*=-1
speedX*=0.4
}
else if(L>=nClientW-obj.offsetWidth)
{
L=nClientW-obj.offsetWidth
speedX*=-1
speedX*=0.4
}
if(T<=0)
{
T=0
speedY*=-1
speedX*=0.8
speedY*=0.8
}
else if(T>=(nScrollT+nClientH-obj.offsetHeight))
{
T=nScrollT+nClientH-obj.offsetHeight
speedY*=-1
speedX*=0.8
speedY*=0.8
document.title=T
}
obj.style.left=L+'px'
obj.style.top=T+'px'
},30)
}
}
</script>
</head>
<body>
<div class="div1" id="div1"><img src="http://img02.taobaocdn.com/imgextra/i2/620343336/T2qsaZXbVbXXXXXXXX-620343336.jpg" /></div>
</body>
</html>