本文实例讲述了JS实现的抛物线运动效果。分享给大家供大家参考,具体如下:
创新互联公司于2013年成立,先为贵定等服务建站,贵定等地企业,进行企业商务咨询服务。为贵定企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
先来看看运行效果:
具体代码如下:
<!doctype html > <html> <head> <meta charset="utf-8"/> <title>抛物线运动</title> <style> .pwx_rect{position:absolute;left:10px;top:300px;background-color:#888;height:50px;width:50px;} .pwx_hr{border-top:2px solid #ddd;position:absolute;width:98%;left:0px;top:350px;} </style> <script> test = function(){ var rect = document.getElementById("rect"); pwx(rect,60,5); //参数2:抛物线角度,参数3:横向速度每次增加5 } function pwx(rect,radian,step){ var animate = function(opt){ var cos = Math.cos(opt.radian*Math.PI/180);//邻边比斜边,60度的话等于1/2 var sin = Math.sin(opt.radian*Math.PI/180);//对边比斜边,30度的话等于1/2 var left = opt.rect.offsetLeft; var top = opt.rect.offsetTop; if(opt.radian>0){ left+=opt.step; opt.radian-=1; //角度递减1 var a = left - opt.initLeft; var c = (a/cos); var b = (sin*c); opt.rect.style.left = opt.initLeft+a+"px"; opt.rect.style.top = opt.initTop-b+"px"; setTimeout(function(){ animate(opt); },10); }else{ opt.rect.style.left = left+opt.step+"px"; opt.rect.style.top = opt.initTop+"px"; } } animate({ step : step, rect : rect, radian : radian, initTop : rect.offsetTop, initLeft : rect.offsetLeft }); } </script> </head> <body> www.jb51.net <input type="button" value="抛物线" onclick="test()"/> <div class="pwx_rect" id="rect"></div> <div class="pwx_hr"></div> </body> </html>
实现思路:
X方向的边长每次递增5,角度每次递减1,根据这两个已知条件,通过三角函数就可以计算出Y方向的长度是多少
从而得出每次运动的X和Y方向的坐标值,达到抛物线的效果
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
网页题目:JS实现的抛物线运动效果示例
文章源于:https://www.cdcxhl.com/article32/jpoopc.html
成都网站建设公司_创新互联,为您提供自适应网站、标签优化、搜索引擎优化、网站制作、营销型网站建设、网站导航
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联