实现一些简单的物业自由落体需要理解:
clientHeight:浏览器客户机的整体高度
offsetHeight:物(实例div)高低
offsetTop:从对象client最顶层的距离
简单demo例如以下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>free_movement</title> <style type="text/css"> #div1{ position: absolute; height: 100px; 100px; background: red; } </style> <script type="text/javascript"> window.onload=function () { var btn=document.getElementById('btn'); var div1=document.getElementById('div1'); var Time=null; var speed=0; btn.onclick=function () { startMove(); } function startMove () { clearInterval(Time); Time=setInterval(function(){ speed+= 3; var T = div1.offsetTop + speed; if(T > document.documentElement.clientHeight - div1.offsetHeight){ T = document.documentElement.clientHeight - div1.offsetHeight; speed *= -1; speed *= 0.75; } div1.style.top=T+'px'; }, 30) } } </script> </head> <body> <input type='button' value='開始运动' id="btn"> <div id="div1"></div> </body> </html>
注:clearTnterval(Time)://防止多个点击事件
版权声明:本文博主原创文章。博客,未经同意不得转载。