JS实现的抛物线运动效果示例

本文实例讲述了射流研究…实现的抛物线运动效果。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

！doctype html html head meta charset=' utf-8 '/title抛物线运动/title样式pwx _ rect {位置：绝对值；left:10pxtop:300px背景色： # 888;高度：50 px宽度：50 px} .pwx _ HR {边框-顶部：2 px实心# DDD；位置：绝对；宽度：98%;left :0 pxtop :350 px }/style script test=function(){ var rect=document。getelementbyid(' rect ')；pwx(rect，60，5)；//参数2:抛物线角度，参数3:横向速度每次增加5 }函数pwx(矩形、弧度、步长){ var animate=function(opt){ var cos=Math。cos(选择。弧度*数学.PI/180)；//邻边比斜边，60度的话等于1/2 var sin=数学。罪恶(选择。弧度*数学.PI/180)；//对边比斜边，30度的话等于左1/2 var=opt。rect。offsetleftvar top=opt。rect。偏移；if(opt。radiano){ left=opt。步骤；选择。弧度-=1；//角度递减1 var a=左选。initleftvar c=(a/cos)；var b=(sin * c)；选择。rect。风格。left=opt。initleft a ' px选择。rect。风格。top=opt。inittop-b ' px '；setTimeout(function(){ animate(opt))；},10);} else { opt。rect。风格。左=左选择。步骤“px”；选择。rect。风格。top=opt。inittop“px”；} } animate({ step : step，rect : rect，radio : radio，initTop : rect.offsetTop，initLeft : rect。offset left })；}/脚本/head dywww。JB 51。净输入类型=' button '值='抛物线onclick=' test()'/div class=' pwx _ rect ' id=' rect '/div div class=' pwx _ HR '/div/body/html实现思路：

X方向的边长每次递增5,角度每次递减1,根据这两个已知条件，通过三角函数就可以计算出Y方向的长度是多少

从而得出每次运动的X和Y方向的坐标值，达到抛物线的效果

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript运动效果与技巧汇总》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。