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

2020-11-27 来源：爱够旅游网

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

先来看看运行效果：

具体代码如下：

<!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.gxlcms.com
<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实现的抛物线运动效果示例