玩过电脑自带纸牌游戏的同志们应该都知道，游戏过关后扑克牌会依次从上空掉落，落下后又弹起，直至“滚出”屏幕。
效果如图：
这个案例的具体效果就是：点击开始运动，纸牌会从右上角掉落下来，之后弹起，运动的速度会逐渐减慢，直到越出屏幕后，全部纸牌消失，在右上角会重新出现一张纸牌，继续动作，一再往复。
具体代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>掉落</title>
<style>
body{
overflow: hidden;
background: greenyellow;
}
div{
width: 71px;
height: 95px;
position: absolute;
top: 10px;
}
</style>
</head>
<body>
<input id="btn" type="button" value="开始运动">
<div id="box" class="box">
<img src="data:images/A.jpg" width="71" height="95">
</div>
</body>
</html>
<script>
//点击按钮，扑克片重复下落
window.onload = function(){
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box"); //初始扑克牌位置，在可视区的右上角
oBox.style.top = 10 + "px";
oBox.style.left=document.documentElement.clientWidth - oBox.offsetWidth + "px"; //随机数
function rnd(m,n){
return parseInt(Math.random()*(m-n)+n);
} //下落碰撞的运动框架
function addMove(){
//初始扑克牌位置，仍在可视区的右上角
oBox.style.left=document.documentElement.clientWidth - oBox.offsetWidth + "px";
oBox.style.top = 10 + "px"; //初始左右移动的初始速度
var iSpeedX = -rnd(6,20);
var iSpeedY = rnd(6,20);
var timer = null; clearInterval(timer);
timer = setInterval(function(){
iSpeedY += 3; //速度逐渐加快
var l = oBox.offsetLeft + iSpeedX;
var t = oBox.offsetTop + iSpeedY; //当扑克牌碰撞到可视区上部或底部时，速度要发生相应的变化
if(t>=document.documentElement.clientHeight - oBox.offsetHeight){ //当扑克牌碰撞底部一次
iSpeedY *= -0.8; //速度降为原来的80%，并且变向
t=document.documentElement.clientHeight - oBox.offsetHeight
}else if(t<=0){ //当扑克牌碰撞顶部一次
iSpeedY *= -1; //速度变向
t=0;
} //当速度的绝对值小于1时，直接为0
if(Math.abs(iSpeedY)<1){
iSpeedY = 0;
} //赋值扑克牌的新位置
oBox.style.left = l + "px";
oBox.style.top = t + "px"; //随时克隆扑克牌，在扑克牌移动的过程中留下克隆出来的信息
var oNewBox = oBox.cloneNode(true);
oNewBox.setAttribute("index","new"); //通过setAttribute区分克隆出来的元素和最初的元素，为了接下来的删除做准备
oNewBox.style.background = "green";
oNewBox.style.left = l + "px";
oNewBox.style.top = t + "px";
document.body.insertBefore(oNewBox,oBox); //新科隆的扑克牌插在之前，否则会盖住原来的移动 //当扑克牌移动出可视区的时候，运动停止
if(oBox.offsetLeft < -oBox.offsetWidth){
iSpeedX = 0;
clearInterval(timer); //将克隆出来的元素全部删除，只保留最初的扑克牌
var aBox = document.getElementsByTagName("div");
for(var i=0;i<aBox.length;i++){
if(aBox[i].getAttribute("index") == "new"){ //删除index=new的元素，即克隆出来的扑克牌，保留最初的扑克牌
document.body.removeChild(aBox[i]);
i--; //元素删除后会影响i值，所以需要i--
}
}
addMove();
}
},30)
} oBtn.onclick = function(){
addMove();
}
}
</script>