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.survivalescaperooms.com<input type="button" value="拋物線" onclick="test()"/>  <div class="pwx_rect" id="rect"></div>  <div class="pwx_hr"></div></body></html>

實現思路：