JS Motion Framework, das Beispiele für Seitenleistenanimationen teilt_Javascript-Kenntnisse

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode zum Teilen von Seitenleistenanimationen im JS Motion Framework. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Code kopieren Der Code lautet wie folgt: *{ Rand:0px; Polsterung:0px; } #div1{ Breite:319px; Höhe: 340px; Rand: 1 Pixel fest #FFF; Position: absolut; oben:100px; links:-320px; Hintergrundbild: url(images/1.png); Hintergrundwiederholung:keine Wiederholung; } #div1 span{ Breite:30px; Höhe: 130px; Rand: 1 Pixel einfarbig blau; Position: absolut; rechts:-23px; oben:95px; Hintergrund: rot; Schriftfamilie: „微软雅黑“; Farbe: #FFFFFF; Textausrichtung: Mitte; Zeilenhöhe: 40px; Randradius: 0px 200px 200px 0px; } window.onload=function(){ var oDiv=document.getElementById("div1"); var oSpan=oDiv.getElementsByTagName('span')[0]; var time=null; var Geschwindigkeit=8; oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件 clearInterval(time); time=setInterval(function(){ If(oDiv.offsetLeft>=0){clearInterval(time);} oDiv.style.left=oDiv.offsetLeft speed 'px'; },1); oDiv.onmouseout=function(){//Mouse-Out-Ereignis zum gesamten Div hinzufügen Zu Time=setInterval(function(){ If(oDiv.offsetLeft oDiv.style.left=oDiv.offsetLeft-speed 'px'; },1); & Lt; span & gt;

Optimierter Code:

Code kopieren

Der Code lautet wie folgt: *{ Rand:0px; Polsterung:0px; } #div1{ Breite:319px; Höhe: 340px; Rand: 1 Pixel fest #FFF; Position: absolut; oben:100px; links:-320px; Hintergrundbild: url(images/1.png); Hintergrundwiederholung:keine Wiederholung; } #div1 span{ Breite:30px; Höhe: 130px; Rand: 1 Pixel einfarbig blau; Position: absolut; rechts:-23px; oben:95px; Hintergrund: rot; Schriftfamilie: „微软雅黑“; Farbe: #FFFFFF; Textausrichtung: Mitte; Zeilenhöhe: 40px; Randradius: 0px 200px 200px 0px; } window.onload=function(){ var oDiv=document.getElementById("div1"); var oSpan=oDiv.getElementsByTagName('span')[0]; var time=null; var spe=8; var speed=null; Funktion move(bord){ clearInterval(time); time=setInterval(function(){ If(oDiv.offsetLeft>bord){speed=-spe;} If(oDiv.offsetLeft==bord){clearInterval(time);} oDiv.style.left=oDiv.offsetLeft speed 'px'; },1); oDiv.onmouseover=function(){//Fügen Sie hier das Mausbewegungsereignis zum gesamten Div hinzu move(0); oDiv.onmouseout=function(){//Mouse-Out-Ereignis zum gesamten Div hinzufügen move(-320); & Lt; span & gt;

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