js ~ 模拟球体高空自由落地弹跳demo 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             #div {
 8                 width: 200px;
 9                 height: 200px;
10                 background: -webkit-radial-gradient(#ccc, #000);
11                 border-radius: 50%;
12                 cursor: pointer;
13                 position: absolute;
14             }
15         </style>
16     </head>
17     <body>
18         <div id="div"></div>
19     </body>
20     <script type="text/javascript">
21         var oDiv = document.querySelector('#div');
22         var iSpeedX = 0;
23         var iSpeedY = 0;
24         var lastX = 0;
25         var lastY = 0;
26         var timer = null;
27         oDiv.onmousedown = function(ev) {
28             var oEvent = ev || event;
29             var disX = oEvent.clientX - oDiv.offsetLeft;
30             var disY = oEvent.clientY - oDiv.offsetTop;
31             clearInterval(timer);
32             document.onmousemove = function(ev) {
33                 var oEvent = ev || event;
34                 oDiv.style.left = oEvent.clientX - disX + 'px';
35                 oDiv.style.top = oEvent.clientY - disY + 'px';
36                 iSpeedX = oEvent.clientX - lastX;
37                 iSpeedY = oEvent.clientY - lastY;
38                 lastX = oEvent.clientX;
39                 lastY = oEvent.clientY;
40             };
41             document.onmouseup = function() {
42                 document.onmousemove = null;
43                 document.onmouseup = null;
44                 doMove();
45             };
46             return false;
47         };
48 
49         function doMove() {
50             timer = setInterval(function() {
51                 iSpeedY += 3;
52                 var l = oDiv.offsetLeft + iSpeedX;
53                 var t = oDiv.offsetTop + iSpeedY;
54                 if (t >= document.documentElement.clientHeight - oDiv.offsetHeight) {
55                     t = document.documentElement.clientHeight - oDiv.offsetHeight;
56                     iSpeedY *= -0.8;
57                     iSpeedX *= 0.8;
58                 }
59                 if (t <= 0) {
60                     t = 0;
61                     iSpeedY *= -0.8;
62                     iSpeedX *= 0.8;
63                 }
64                 if (l >= document.documentElement.clientWidth - oDiv.offsetWidth) {
65                     l = document.documentElement.clientWidth - oDiv.offsetWidth;
66                     iSpeedX *= -0.8;
67                     iSpeedY *= 0.8;
68                 }
69                 if (l <= 0) {
70                     l = 0;
71                     iSpeedX *= -0.8;
72                     iSpeedY *= 0.8;
73                 }
74                 oDiv.style.left = l + 'px';
75                 oDiv.style.top = t + 'px';
76                 if (Math.abs(iSpeedX) < 1) iSpeedX = 0;
77                 if (Math.abs(iSpeedY) < 1) iSpeedY = 0;
78                 if (iSpeedX == 0 && iSpeedY == 0 && t == document.documentElement.clientHeight - oDiv.offsetHeight) {
79                     clearInterval(timer);
80                 }
81             }, 30);
82         }
83     </script>
84 </html>

 

posted @ 2022-04-11 16:05  三只小熊sky  阅读(79)  评论(0)    收藏  举报