js实现自由落体

最新推荐文章于 2022-07-13 08:05:27 发布

weixin_30838873

最新推荐文章于 2022-07-13 08:05:27 发布

阅读量439

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guorange/p/7142611.html

版权

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

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---之自由落体运动实现

转载于:https://www.cnblogs.com/guorange/p/7142611.html

weixin_30838873

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现自由落体

实现自由落体运动需要理解的几个简单属性：clientHeight：浏览器客户端整体高度offsetHeight：对象（比如div）的高度offsetTop：对象离客户端最顶端的距离 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset=...
复制链接

扫一扫