Contoh dalam artikel ini menerangkan kaedah pelaksanaan berkongsi animasi bar sisi dalam rangka kerja gerakan JS. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: Salin kod Kod adalah seperti berikut: <br> *{ <br> margin:0px; <br> padding:0px; <br> } <br> #div1{ <br> lebar: 319px; <br> ketinggian: 340px; <br> sempadan: 1px pepejal #FFF; <br> jawatan: mutlak; <br> atas:100px; <br> kiri:-320px; <br> imej latar belakang: url(imej/1.png); <br> background-repeat:no-repeat ; <br> } <br> #div1 span{ <br> lebar: 30px; <br> ketinggian: 130px; <br> sempadan: 1px biru pepejal; <br> jawatan: mutlak; <br> kanan:-23px; <br> atas:95px; <br> latar belakang: merah; <br> font-family: "微软雅黑"; <br> warna: #FFFFFF; <br> text-align: tengah; <br> ketinggian garis: 40px; <br> jejari sempadan: 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 masa=null; <br> kelajuan var=8; <br> oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件 <br> clearInterval(masa); <br> time=setInterval(function(){ <br>If(oDiv.offsetLeft>=0){clearInterval(time);} <br> oDiv.style.left=oDiv.offsetKelajuan kiri 'px'; },1); oDiv.onmouseout=function(){//Tambahkan acara keluar tetikus pada keseluruhan div<br> untuk Time=setInterval(function(){ <br> If(oDiv.offsetLeft<=-320){clearInterval(time);} <br /> oDiv.style.left=oDiv.offset 'px' kelajuan kiri; },1); </head> <badan> <br> & Lt; span & gt; </body> </html><br><br> Kod dioptimumkan:<br> <br><br><br><br>Salin kod<br><br><br> Kod adalah seperti berikut:<br><div class="codebody" id="code71160"><!DOCTYPE html> <br> <html> <br> <kepala> <br> <meta charset="utf-8"> <br> <title></title> <br> <style type="text/css"> <br> *{ <br> margin:0px; <br> padding:0px; <br> } <br> #div1{ <br> lebar: 319px; <br> ketinggian: 340px; <br> sempadan: 1px pepejal #FFF; <br> jawatan: mutlak; <br> atas:100px; <br> kiri:-320px; <br> imej latar belakang: url(imej/1.png); <br> background-repeat:no-repeat ; <br> } <br> #div1 span{ <br> lebar: 30px; <br> ketinggian: 130px; <br> sempadan: 1px biru pepejal; <br> jawatan: mutlak; <br> kanan:-23px; <br> atas:95px; <br> latar belakang: merah; <br> font-family: "微软雅黑"; <br> warna: #FFFFFF; <br> text-align: tengah; <br> ketinggian garis: 40px; <br> jejari sempadan: 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 masa=null; <br> var spe=8; <br> var speed=null; <br> alih fungsi(bord){ <br> clearInterval(masa); <br> time=setInterval(function(){ <br>If(oDiv.offsetLeft>bord){speed=-spe;} <br> If(oDiv.offsetLeft==bord){clearInterval(time);} <br> oDiv.style.left=oDiv.offsetKelajuan kiri 'px'; },1); oDiv.onmouseover=function(){//Tambahkan acara pergerakan tetikus ke seluruh div di sini<br> bergerak(0); oDiv.onmouseout=function(){//Tambahkan acara keluar tetikus pada keseluruhan div<br> bergerak (-320); </head> <badan> <br> & Lt; span & gt; </body> </html><br><br> <br>Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang. <br> </div> </div>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
