本文實例講述了js實現綠白相間垂直網頁百葉窗動畫切換效果。分享給大家供大家參考。具體分析如下： 前面我們講解了一個網頁百葉窗切換動畫效果，不過是橫向百葉窗，這個是豎向百葉窗，代碼基本上一樣： 複製程式碼 程式碼如下: 百葉窗頁面切換效果 <br /> <!--<br /> .intro{<br /> position:absolute;<br /> left:0;<br /> top:0;<br /> layer-background-color:green;<br /> background-color:green;<br /> border:0.1px solid green<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/8-0.3<br /> temp[i].height=window.innerHeight<br /> temp2[i].left=(i-1)*temp[i].width<br /> }<br /> }<br /> else if (document.all){<br /> var clipbottom=document.body.offsetHeight,cliptop=0<br /> for (i=1;i<=8;i ){<br /> temp[i]=eval("document.all.i" i ".style")<br /> temp[i].width=document.body.clientWidth/8<br /> temp[i].height=document.body.offsetHeight<br /> temp[i].left=(i-1)*parseInt(temp[i].width)<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].bottom-=speed<br /> for (i=2;i<=8;i=i 2)<br /> temp[i].top =speed<br /> if (temp[2].top>window.innerHeight)<br /> clearInterval(stopit)<br /> }<br /> else if (document.all){<br /> clipbottom-=speed<br /> for (i=1;i<=8;i=i 2){<br /> temp[i].clip="rect(0 auto " clipbottom " 0)"<br /> }<br /> cliptop =speed<br /> for (i=2;i<=8;i=i 2){<br /> temp[i].clip="rect(" cliptop " auto auto)"<br /> }<br /> if (clipbottom<=0)<br /> clearInterval(stopit)<br /> }<br /> }<br /> function gogo(){<br /> stopit=setInterval("openit()",100)<br /> }<br /> gogo()<br /> 希望本文所述對大家的javascript程式設計有所幫助。
