碰撞运动撞到目标点，速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来
加入重力反转速度的同时，减小速度纵向碰撞，横向速度也减小横向速度小数问题（负数）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1{ width:100px; height:100px; background:red; position:absolute;} 8 </style> 9 <script>10 11 //碰撞运动 : 首先找到碰撞的临界点 , 再确定运动的方向 , 然后去改对应的速度（速度取反）12 13 window.onload = function(){14 var oDiv = document.getElementById('div1');15 16 var iSpeedX = 10;17 var iSpeedY = 10;18 19 startMove();20 21 function startMove(){22 setInterval(function(){23 24 var L = oDiv.offsetLeft + iSpeedX;25 var T = oDiv.offsetTop + iSpeedY;26 27 if(T>document.documentElement.clientHeight - oDiv.offsetHeight){28 T = document.documentElement.clientHeight - oDiv.offsetHeight;29 iSpeedY *= -1;30 }31 else if(T<0){32 T = 0;33 iSpeedY *= -1;34 }35 36 if(L>document.documentElement.clientWidth - oDiv.offsetWidth){37 L = document.documentElement.clientWidth - oDiv.offsetWidth;38 iSpeedX *= -1;39 }40 else if(L<0){41 L = 0;42 iSpeedX *= -1;43 }44 45 oDiv.style.left = L + 'px';46 oDiv.style.top = T + 'px';47 },30);48 }49 50 };51 </script>52 </head>53 54 <body>55 <div id="div1"></div>56 </body>57 </html>自由落体 ：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1{ width:100px; height:100px; background:red; position:absolute;} 8 </style> 9 <script>10 window.onload = function(){11 var oInput = document.getElementById('input1');12 var oDiv = document.getElementById('div1');13 14 var timer = null;15 var iSpeed = 0;16 17 oInput.onclick = function(){18 startMove();19 };20 21 function startMove(){22 clearInterval(timer);23 timer = setInterval(function(){24 25 iSpeed += 3;26 27 var T = oDiv.offsetTop + iSpeed;28 29 if(T > document.documentElement.clientHeight - oDiv.offsetHeight){30 T = document.documentElement.clientHeight - oDiv.offsetHeight;31 iSpeed *= -1;32 33 iSpeed *= 0.75;34 35 }36 37 oDiv.style.top = T + 'px';38 39 },30);40 }41 42 };43 </script>44 </head>45 46 <body>47 <input type="button" value="开始运动" id="input1">48 <div id="div1"></div>49 </body>50 </html>新闻热点
疑难解答
