js-Methode zum Erlernen der Pufferung von Bewegungseffekten_Javascript-Fähigkeiten-js-Tutorial-php.cn

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 16:04:55

Original

1091 Leute haben es durchsucht

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;

Nach dem Login kopieren

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&#63;Math.ceil(speed):Math.floor(speed);

Nach dem Login kopieren

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>

Nach dem Login kopieren

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