本文實例講述了js實現橫向百葉窗效果網頁切換動畫效果的方法。分享給大家供大家參考。具體分析如下： 這是一款很簡潔但是效果卻不錯的網頁切換效果，點擊新網頁後，網頁會出現藍白相間的百葉窗線條自動切換，直到網頁全部顯示完全。程式碼如下： 複製程式碼 程式碼如下: js網頁百葉窗動態切換效果 <br /> <!--<br /> .intro{<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> layer-background-color:blue;<br /> background-color:blue;<br /> border:0.1px solid blue<br /> }<br /> --><br /> class="intro"> id="i6" class="intro"> <br /> var speed=20<br /> var temp=new Array()<br /> var temp2=new Array()<br /> if (document.layers){<br /> for (i=1;i<=8;i ){<br /> temp[i]=eval("document.i" i ".clip")<br /> temp2[i]=eval("document.i" i)<br /> temp[i].width=window.innerWidth<br /> temp[i].height=window.innerHeight/8<br /> temp2[i].top=(i-1)*temp[i].height<br /> }<br /> }<br /> else if (document.all){<br /> var clipright=document.body.clientWidth,clipleft=0<br /> for (i=1;i<=8;i ){<br /> temp[i]=eval("document.all.i" i ".style")<br /> temp[i].width=document.body.clientWidth<br /> temp[i].height=document.body.offsetHeight/8<br /> temp[i].top=(i-1)*parseInt(temp[i].height)<br /> }<br /> }<br /> function openit(){<br /> window.scrollTo(0,0)<br /> if (document.layers){<br /> for (i=1;i<=8;i=i 2)<br /> temp[i].right-=speed<br /> for (i=2;i<=8;i=i 2)<br /> temp[i].left =speed<br /> if (temp[2].left>window.innerWidth)<br /> clearInterval(stopit)<br /> }<br /> else if (document.all){<br /> clipright-=speed<br /> for (i=1;i<=8;i=i 2){<br /> temp[i].clip="rect(0 " clipright " auto 0)"<br /> }<br /> clipleft =speed<br /> for (i=2;i<=8;i=i 2){<br /> temp[i].clip="rect(0 auto auto " clipleft ")"<br /> }<br /> if (clipright<=0)<br /> clearInterval(stopit)<br /> }<br /> }<br /> function gogo(){<br /> stopit=setInterval("openit()",100)<br /> }<br /> gogo()<br /> 希望本文所述對大家的javascript程式設計有所幫助。
