suchen

Heim >Web-Frontend >js-Tutorial >js-Methode zum Erlernen der Pufferung von Bewegungseffekten_Javascript-Fähigkeiten

js-Methode zum Erlernen der Pufferung von Bewegungseffekten_Javascript-Fähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 16:04:551103Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zum Realisieren des Pufferungsbewegungseffekts in js. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Dieses Beispiel kann den Effekt erzielen, dass man sehr schnell beginnt und dann langsamer wird, bis es aufhört.

Wichtige Punkte: 

var speed = (target-box.offsetLeft)/8;

Der Wert des Zielpunkts minus der aktuellen Position des Elements wird durch 8 geteilt. Da der Wert von offsetleft immer größer wird, wird der Wert der Geschwindigkeit immer kleiner

speed = speed>0?Math.ceil(speed):Math.floor(speed);

Die Vorwärtsgeschwindigkeit wird aufgerundet, die Rückwärtsgeschwindigkeit wird abgerundet

Code: 

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body{margin:0; padding:0; font:12px/1.5 arial;}
#box{width:100px; height:100px; position:absolute;
background:#06c; left:0;}
-->
</style>
<script>
<!--
window.onload = function(){
 var box = document.getElementById("box");
 var btn = document.getElementById("btn");
 var timer=null;
 btn.onclick = function(){
  startrun(300);
 }
 function startrun(target){
  clearInterval(timer);
  timer = setInterval(function(){
  var speed = (target-box.offsetLeft)/8;
  speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);
  if(box.offsetLeft == target){
   clearInterval(timer);
  }else{
   box.style.left = box.offsetLeft+speed+"px";
  }
  document.getElementById('abc').innerHTML+=box.offsetLeft+','+speed+'<br>';
  },30);
 }
}
//-->
</script>
</head>
<body>
<input id="btn" type="submit" value="向右运动">
<div id="box">
</div>
<br>
<textarea id="abc" cols="50" rows="10" 
style="margin-top:130px"></textarea>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js implementiert einfache umschaltbare Tab-Effekte_Javascript-FähigkeitenNächster Artikel：js implementiert einfache umschaltbare Tab-Effekte_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen