弹跳的球(对象,原型,实例练习)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.ball{
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div id="ball" class="ball"></div>

<script>
var ball=document.getElementById("ball");
var a={x:100,y:50,r:25,w:4,h:5,g:2,color:"red"}
ball.style.left=a.x+"px";//初始位置
ball.style.top=a.y+"px";
ball.style.width=a.r*2+"px";//球的参数
ball.style.height=a.r*2+"px";
ball.style.background=a.color;//颜色
var time=setInterval(function(){
a.x+=a.w; //移动距离
a.y+=a.h;
a.h+=a.g; //掉落加速
ball.style.top=a.y+"px";
ball.style.left=a.x+"px";
if(a.y>500){//漂移+回弹
a.h=-a.h*0.8;
}
},50);



</script>
</body>
</html>

posted @ 2017-04-20 13:44  非凡。  阅读(318)  评论(0编辑  收藏  举报