suchen

Heim  >  Artikel  >  Web-Frontend  >  js-Methode, um mehrere Bewegungseffekte auf derselben Seite zu erzielen_Javascript-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 16:04:521138Durchsuche

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;

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

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

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";
}

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);
}
}

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>

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：So implementieren Sie einfache Tabs und automatische Umschalteffekte in js_javascript-KenntnissenNächster Artikel：So implementieren Sie einfache Tabs und automatische Umschalteffekte in js_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen