JS erzeugt eine parabolische Bewegungsbahn-js-Tutorial-php.cn

JS erzeugt eine parabolische Bewegungsbahn

php中世界最好的语言

Freigeben： 2018-04-13 09:45:43

Original

2153 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen JS mit, um eine parabolische Bewegungsbahn zu erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer parabolischen Bewegungsbahn mit JS?

Der spezifische Code lautet wie folgt:

<!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()"/>
  <p class="pwx_rect" id="rect"></p>
  <p class="pwx_hr"></p>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vervollständigung der E-Mail-Adresse des JS-Eingabeaufforderungstextfelds

Anweisungen zur Vue-Projektstruktur

Das obige ist der detaillierte Inhalt vonJS erzeugt eine parabolische Bewegungsbahn. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!