主页 / 网络编程 /

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

网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了JS实现的抛物线运动效果,结合实例形式分析了javascript抛物线运动的相关运算与元素动态操作实现技巧,需要的朋友可以参考下

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

先来看看运行效果

具体代码如下

<!doctype html >
<html>
<head>
  <meta charset="utf-8"/>
  <title>抛物线运动</title>
  <style>
    .pwx_rect{position:absolute;left:10px;:300px;background-color:#888;height:50px;width:50px;}
    .pwx_hr{border-:2px solid #ddd;position:absolute;width:98%;left:0px;: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.radianMath.PI/180);//邻边比斜边,60度的话等于1/2
        var sin = Math.sin(opt.radianMath.PI/180);//对边比斜边,30度的话等于1/2
        var left = opt.rect.offsetLeft;
        var  = 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 = (sinc);
          opt.rect.style.left = opt.initLeft+a+"px";
          opt.rect.style. = opt.initTop-b+"px";
          setTimeout(function(){
            animate(opt);
          },10);
        }else{
          opt.rect.style.left = left+opt.step+"px";
          opt.rect.style. = opt.initTop+"px";
        }
      }
      animate({
        step : step,
        rect : rect,
        radian : radian,
        initTop : rect.offsetTop,
        initLeft : rect.offsetLeft
      });
    }
  </script>
</head>
<body>
.jb51.
<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程序设计有所帮助。

上一篇：JS实现的邮箱提示补全效果示例 下一篇：express如何使用session与cookie的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by