js-Methode, um mehrere Bewegungseffekte auf derselben Seite zu erzielen_Javascript-Fähigkeiten-js-Tutorial-php.cn

js-Methode, um mehrere Bewegungseffekte auf derselben Seite zu erzielen_Javascript-Fähigkeiten

WBOY

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

Original

1171 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von js, um mehrere Bewegungseffekte auf derselben Seite zu erzielen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Das Implementierungsprinzip besteht darin, diesen fünf Elementen beim Aufruf Ereignisse in einer Schleife hinzuzufügen. Beachten Sie, dass die Timer für jedes Element separat sein müssen.

Punkt 1:

var speed = (target - obj.offsetWidth)/8;

Nach dem Login kopieren

Puffer-Bewegungseffekt, zunächst sehr schnell, dann immer langsamer, bis er aufhört

speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);

Nach dem Login kopieren

Wenn die Geschwindigkeit größer als 0 ist, runden Sie auf, wenn die Geschwindigkeit kleiner als 0 ist, runden Sie ab.

Punkt 2:

if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+"px";
}

Nach dem Login kopieren

Vergleichen Sie die Elementbreite mit dem Zielwert. Wenn sie gleich sind, schließen Sie den Timer. Andernfalls erhöht sich die Breite weiter.

Punkt drei:

for(i=0; i<runs_li.length; i++){
runs_li[i].timer = null;
runs_li[i].onmouseover = function(){
startrun(this,300);
}
runs_li[i].onmouseout = function(){
startrun(this,80);
}
}

Nach dem Login kopieren

Fügen Sie jedem Element ein eigenes Timer-Attribut und ein eigenes Mausereignis hinzu und rufen Sie die Bewegungsfunktion im Mausereignis auf.

Zum Schluss fügen Sie den Code hinzu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
position:absolute; left:0;}
</style>
<script>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("li");
 var i=0;
 for(i=0; i<runs_li.length; i++){
 runs_li[i].timer = null;
 runs_li[i].onmouseover = function(){
  startrun(this,300);
 }
 runs_li[i].onmouseout = function(){
  startrun(this,80);
 }
 }
}
function startrun(obj,target){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var speed = (target - obj.offsetWidth)/8;
 speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);
 
 if(obj.offsetWidth == target){
  clearInterval(obj.timer);
 }else{
  obj.style.width = obj.offsetWidth+speed+"px";
 }
 document.title = obj.offsetWidth + ',' + target;
 },30);
}
</script>
</head>
<body>
<ul id="runs">
 <li style="top:0">1</li>
 <li style="top:90px;">2</li>
 <li style="top:180px;">3</li>
 <li style="top:270px;">4</li>
 <li style="top:360px;">5</li>
</ul>
</body>
</html>

Nach dem Login kopieren

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