Rangka kerja gerakan JS berkongsi animasi sidebar examples_javascript kemahiran

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: *{ margin:0px; padding:0px; } #div1{ lebar: 319px; ketinggian: 340px; sempadan: 1px pepejal #FFF; jawatan: mutlak; atas:100px; kiri:-320px; imej latar belakang: url(imej/1.png); background-repeat:no-repeat ; } #div1 span{ lebar: 30px; ketinggian: 130px; sempadan: 1px biru pepejal; jawatan: mutlak; kanan:-23px; atas:95px; latar belakang: merah; font-family: "微软雅黑"; warna: #FFFFFF; text-align: tengah; ketinggian garis: 40px; jejari sempadan: 0px 200px 200px 0px; } window.onload=function(){ var oDiv=document.getElementById("div1"); var oSpan=oDiv.getElementsByTagName('span')[0]; var masa=null; kelajuan var=8; oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件 clearInterval(masa); time=setInterval(function(){ If(oDiv.offsetLeft>=0){clearInterval(time);} oDiv.style.left=oDiv.offsetKelajuan kiri 'px'; },1); oDiv.onmouseout=function(){//Tambahkan acara keluar tetikus pada keseluruhan div untuk Time=setInterval(function(){ If(oDiv.offsetLeft oDiv.style.left=oDiv.offset 'px' kelajuan kiri; },1); & Lt; span & gt;

Kod dioptimumkan:

Salin kod

Kod adalah seperti berikut: *{ margin:0px; padding:0px; } #div1{ lebar: 319px; ketinggian: 340px; sempadan: 1px pepejal #FFF; jawatan: mutlak; atas:100px; kiri:-320px; imej latar belakang: url(imej/1.png); background-repeat:no-repeat ; } #div1 span{ lebar: 30px; ketinggian: 130px; sempadan: 1px biru pepejal; jawatan: mutlak; kanan:-23px; atas:95px; latar belakang: merah; font-family: "微软雅黑"; warna: #FFFFFF; text-align: tengah; ketinggian garis: 40px; jejari sempadan: 0px 200px 200px 0px; } window.onload=function(){ var oDiv=document.getElementById("div1"); var oSpan=oDiv.getElementsByTagName('span')[0]; var masa=null; var spe=8; var speed=null; alih fungsi(bord){ clearInterval(masa); time=setInterval(function(){ If(oDiv.offsetLeft>bord){speed=-spe;} If(oDiv.offsetLeft==bord){clearInterval(time);} oDiv.style.left=oDiv.offsetKelajuan kiri 'px'; },1); oDiv.onmouseover=function(){//Tambahkan acara pergerakan tetikus ke seluruh div di sini bergerak(0); oDiv.onmouseout=function(){//Tambahkan acara keluar tetikus pada keseluruhan div bergerak (-320); & Lt; span & gt;

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.