欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-07 14:09:54
本文实例讲述了js实现的抛物线运动效果。分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: ...

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

先来看看运行效果:

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.jb51.net
<input type="button" value="抛物线" onclick="test()"/>
  <div class="pwx_rect" id="rect"></div>
  <div class="pwx_hr"></div>
</body>
</html>

实现思路:

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

x方向的边长每次递增5,角度每次递减1,根据这两个已知条件,通过三角函数就可以计算出y方向的长度是多少

从而得出每次运动的x和y方向的坐标值,达到抛物线的效果

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

希望本文所述对大家javascript程序设计有所帮助。