亲品藏
^
JavaScript教程之实现页面百叶窗效果

  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 (documentyers){《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 (documentyers){《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》

相关阅读

CopyRight 亲品藏移动版(m.qinpinchang.com)