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

2019-11-19 14:27:17

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.VeVB.COm<input type="button" value="抛物线" onclick="test()"/>  <div class="pwx_rect" id="rect"></div>  <div class="pwx_hr"></div></body></html>

实现思路：