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: <br> *{ <br> Rand:0px; <br> Polsterung:0px; <br> } <br> #div1{ <br> Breite:319px; <br> Höhe: 340px; <br> Rand: 1 Pixel fest #FFF; <br> Position: absolut; <br> oben:100px; <br> links:-320px; <br> Hintergrundbild: url(images/1.png); <br> Hintergrundwiederholung:keine Wiederholung; <br> } <br> #div1 span{ <br> Breite:30px; <br> Höhe: 130px; <br> Rand: 1 Pixel einfarbig blau; <br> Position: absolut; <br> rechts:-23px; <br> oben:95px; <br> Hintergrund: rot; <br> Schriftfamilie: „微软雅黑“; <br> Farbe: #FFFFFF; <br> Textausrichtung: Mitte; <br> Zeilenhöhe: 40px; <br> Randradius: 0px 200px 200px 0px; <br> } <br> <br> window.onload=function(){ <br> var oDiv=document.getElementById("div1"); <br> var oSpan=oDiv.getElementsByTagName('span')[0]; <br> var time=null; <br> var Geschwindigkeit=8; <br> oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件 <br> clearInterval(time); <br> time=setInterval(function(){ <br>If(oDiv.offsetLeft>=0){clearInterval(time);} <br> oDiv.style.left=oDiv.offsetLeft speed 'px'; },1); oDiv.onmouseout=function(){//Mouse-Out-Ereignis zum gesamten Div hinzufügen<br> Zu Time=setInterval(function(){ <br> If(oDiv.offsetLeft<=-320){clearInterval(time);} <br /> oDiv.style.left=oDiv.offsetLeft-speed 'px'; },1); </head> <Körper> & Lt; span & gt; </body> </html><br><br> Optimierter Code:<br> <br><br><br><br>Code kopieren<br><br><br> Der Code lautet wie folgt:<br><div class="codebody" id="code71160"><!DOCTYPE html> <br> <html> <br> <Kopf> <br> <meta charset="utf-8"> <br> <title></title> <br> <style type="text/css"> <br> *{ <br> Rand:0px; <br> Polsterung:0px; <br> } <br> #div1{ <br> Breite:319px; <br> Höhe: 340px; <br> Rand: 1 Pixel fest #FFF; <br> Position: absolut; <br> oben:100px; <br> links:-320px; <br> Hintergrundbild: url(images/1.png); <br> Hintergrundwiederholung:keine Wiederholung; <br> } <br> #div1 span{ <br> Breite:30px; <br> Höhe: 130px; <br> Rand: 1 Pixel einfarbig blau; <br> Position: absolut; <br> rechts:-23px; <br> oben:95px; <br> Hintergrund: rot; <br> Schriftfamilie: „微软雅黑“; <br> Farbe: #FFFFFF; <br> Textausrichtung: Mitte; <br> Zeilenhöhe: 40px; <br> Randradius: 0px 200px 200px 0px; <br> } <br> </style> <br> <script type="text/javascript"> <br> window.onload=function(){ <br> var oDiv=document.getElementById("div1"); <br> var oSpan=oDiv.getElementsByTagName('span')[0]; <br> var time=null; <br> var spe=8; <br> var speed=null; <br> Funktion move(bord){ <br> clearInterval(time); <br> time=setInterval(function(){ <br>If(oDiv.offsetLeft>bord){speed=-spe;} <br> If(oDiv.offsetLeft==bord){clearInterval(time);} <br> oDiv.style.left=oDiv.offsetLeft speed 'px'; },1); oDiv.onmouseover=function(){//Fügen Sie hier das Mausbewegungsereignis zum gesamten Div hinzu<br> move(0); <br> oDiv.onmouseout=function(){//Mouse-Out-Ereignis zum gesamten Div hinzufügen<br> move(-320); <br> </head> <Körper> & Lt; span & gt; </body> </html><br><br> <br>Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird. <br> </div> </div>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
