JavaScript教程之实现页面百叶窗效果

　　JavaScript怎么在页面上做出百叶窗的效果，其实这样的代码是简单的，大家学习下吧。百叶窗是家庭装饰的一种款式。在网页中，我们也可以利用简单的JavaScript代码产生同样效果，这样网友浏览网站时就会有一种与众不同的感觉！

JavaScript教程之实现页面百叶窗效果

　　方法如下：

　　一、把如下代码加入到《head》《/head》区域中。

　　《style》

　　《！--

　　.intro{position:absolute;

　　left:0;

　　top:0;

　　layer-background-color:green;

　　background-color:green;

　　border:0.1px solid green

　　}

　　--》

　　《/style》

　　二、把如下代码加入到《body》《/body》区域中。

　　《div id="i1" class="intro"》《/div》《div id="i2" class="intro"》《/div》《div id="i3"《BR》class="intro"》《/div》《div id="i4" class="intro"》《/div》《div id="i5" class="intro"》《/div》《div《BR》id="i6" class="intro"》《/div》《div id="i7" class="intro"》《/div》《div id="i8" class="intro"》《/div》《BR》《SCRIPT language=JavaScript》《BR》《！--《BR》var speed=30《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》--》《BR》《/SCRIPT》