码迷,mamicode.com
首页 > Web开发 > 详细

js实现自由落体

时间:2017-07-09 20:42:32      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:--   ack   实现   产生   java   lin   点击   article   var   

实现自由落体运动需要理解的几个简单属性:

clientHeight:浏览器客户端整体高度

offsetHeight:对象(比如div)的高度

offsetTop:对象离客户端最顶端的距离

 1 <!doctype html>  
 2 <html lang="en">  
 3 <head>  
 4     <meta charset="UTF-8">  
 5     <title>free_movement</title>  
 6     <style type="text/css">  
 7         #div1{  
 8             position: absolute;  
 9             height: 100px;  
10             width: 100px;  
11             background: red;  
12         }  
13     </style>  
14     <script type="text/javascript">  
15         window.onload=function  () {  
16             var btn=document.getElementById(btn);  
17             var div1=document.getElementById(div1);  
18   
19             var Time=null;  
20             var speed=0;  
21             btn.onclick=function () {  
22                 startMove();  
23             }  
24   
25             function startMove () {  
26                 clearInterval(Time);   //clearTnterval(Time)://防止多次点击事件的产生
27                 Time=setInterval(function(){  
28                     speed+= 3;  
29                     var T = div1.offsetTop + speed;  
30                     if(T > document.documentElement.clientHeight - div1.offsetHeight){  
31                         T = document.documentElement.clientHeight - div1.offsetHeight;  
32                         speed *= -1;  
33                         speed *= 0.75;  
34                     }  
35                     div1.style.top=T+px;  
36                 }, 30)  
37             }  
38         }  
39     </script>  
40 </head>  
41 <body>  
42     <input type=‘button‘ value=‘开始运动‘ id="btn">  
43     <div id="div1"></div>  
44 </body>  
45 </html> 

转自: 

javascript---之自由落体运动实现

js实现自由落体

标签:--   ack   实现   产生   java   lin   点击   article   var   

原文地址:http://www.cnblogs.com/guorange/p/7142611.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!