jQuery模拟物体自由落体运动（附演示与演示源码下载)

本文实例讲述了jQuery模拟物体自由落体运动的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

点击此处查看在线演示效果。

完整实例代码点击此处本站下载。

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题自由落体/title脚本src=' http : jquery-1。7 .1 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。就绪(函数(){ });var all _ Height=500var a=9.8//加速度var v=0；var prev _ Time=0；var prev _ Speed=0；var prev _ Height=0；定义变量速度=0;//获取当前的高度var GetHeight=function(obj){ return obj。偏移量().顶部；} //获取当前的速度var getSpeed=函数(时间，a){返回时间* a；} //向下走时获得当前物体所走的路径var getCurrentHeight=function(time){ return 1/2 * a * time * time；} //向上走时获得当前物体所走的路径var getCurrentHeight2=函数（速度、时间){返回速度*时间- 1/2 * a *时间*时间；} //向下跑函数down(){ prev _ Time=0；var interval=setInterval(function(){ if(GetHeight)($(')).obj’))all _ Height){ prev _ Time=prev _ Time 0.1；var Height=getCurrentHeight(prev _ Time)prev _ Height；$('.obj ').css(“”顶部，高度px’)；$('.信息')。追加(“div”高度/“div”)；} else { speed=getSpeed(a，prev _ Time)；prev_Speed=速度；clearInterval(区间);up()；} }, 5);} //向上跑函数up(){ prev _ Time=0；prev _ Speed-=4；//动能损耗var interval=setInterval(函数(){ if(Speed 0){ Speed=prev _ Speed-getSpeed(a，prev _ Time)；prev _ Time=prev _ Time 0.1 var Height=all _ Height-get current Height 2(prev _ Speed，prev _ Time)；$('.obj ').css(“”顶部，高度px’)；} else { clearInterval(interval)；prev_Height=$(' .obj ').偏移量()。顶部；if(prev _ Height all _ Height){ down()；} } }, 5);} function play(){ alert(' play ')；down()；document.getElementById('obj ').onclick=null}/脚本样式类型="文本/CSS "正文{ margin :0 0 0 background : # FFFFFF }。title { text-align :居中；color : # 666666 border-bottom :2 px纯灰色；font-size :30 px线高：100 px字体粗细：加粗；} .obj { background-image : URL(' a . jpg ')；宽度：50 px高度：50 px位置：绝对；top :0 left :0 }/style/head dydiv style=' height :550 px；边框-bottom:2px纯灰色；'div class='title '自由落体大模拟span style=' font-size :12 px'（点击图片让它落下)/span/div/div class=' obj ' id=' obj ' onclick=' play()；'/div/body/html更多关于射流研究…运动相关内容感兴趣的读者可查看本站专题： 《JavaScript运动效果与技巧汇总》

希望本文所述对大家jQuery程序设计有所帮助。