珠峰培训首页上的那个弹出框就用到了这个效果，自由落体（加速下落和反弹）。
珠峰培训课堂示例的代码，有详细的注释。
把以下代码另存为HTML网页，即可运行！
<!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>
<script type="text/ecmascript">
function move(){
var oDiv=document.getElementById('div1');
if(oDiv.nSpeed==undefined){//把速度定义当前运动的这个DIV的一个属性
oDiv.nSpeed=0; //初始的速度是0
}
oDiv.nSpeed+=10; //加速度
oDiv.nSpeed*=0.97; //摩擦系数
//nBh是浏览器的高度
var nBh=document.documentElement.clientHeight||document.body.clientHeight;
if(oDiv.offsetTop+oDiv.nSpeed>=nBh-oDiv.offsetHeight){//判断是否到底边
oDiv.style.top=nBh-oDiv.offsetHeight+'px';//不能越界
oDiv.nSpeed*=-1;//到了底边后往相反的方向运动（就是向上）
}else{
oDiv.style.top=oDiv.offsetTop+oDiv.nSpeed+'px';//正常的运动
}
oDiv.timer=window.setTimeout(move,30);
if(oDiv.flag&&oDiv.offsetTop+oDiv.offsetHeight==nBh)
{//如果上次就到了终点，这次还在终点这儿没有动，则说明已经停止了，则中止此方法的运行
window.clearTimeout(oDiv.timer)
alert('stop')
}
oDiv.flag=(oDiv.offsetTop+oDiv.offsetHeight==nBh)//把这次是不是达到了终点记录下来，留给下一次用
}
</script>
</head>
<body>
<div id="div1" style="width:100px; height:100px; position:absolute;top:0; left:300px; background:red;" onclick="move()"></div>
</body>
</html>
霍营市场监督管理所投诉举报电话：010-60787760 | 