求教,百叶窗 效果
求教,代码运行没有报错,但是没有带到预期的效果程序代码:
<html> <head> <style type="text/css"> .a{border:pink 0px solid;left:0px;position:absolute;top:0px;background-color:pink;layer-background-color:pink;} </style> </head> <body > <div class="a" id="i1"></div> <div class="a" id="i2"></div> <div class="a" id="i3"></div> <div class="a" id="i4"></div> <div class="a" id="i5"></div> <div class="a" id="i6"></div> <div class="a" id="i7"></div> <div class="a" id="i8"></div> <script language="javascript"> var i; var a=20; var group1=new Array(); var clipright=clipleft=document.body.clientWidth.clipleft=0; //建立一个数组group1来引用HTML中定义的层,用for循环把8个元素分别取为上面定义的8个层。 //eval()是Javascript的内置函数,这里的作用是把字符串"document.all.i"+i+".style"转换成对应的表达式 for(i=1;i<=8;i++){ group1[i]=eval("document.all.i"+i+".style"); group1[i].width=document.body.clientWidth; group1[i].height=document.body.offsetHeight/8; group1[i].top=(i-1)*parseInt(group1[i].height); } //层的移动, function start(){ returnback=setInterval("movebar()",100); } //if中的连个for语句分别在奇数时右边界-a,偶数时左边界-a //clearInterval()是一个非常关键的语句,他在奇数号层的右边界<=0的时候中指setInterval()的继续执行。 function movebar(){ window.scrollTo(0,0); if(document.all){ clipright=a; for(i=1;i<=8;i=i+2) group1[i].clip="rect(0 '+clipright+' auto 0)"; clipleft=clipleft+a; for(i=2;i<=8;i=i+2) group1[i].clip="rect(0 auto auto '+clipleft+')"; if(clipright<=0) clearInterval(returnback); } } </script> </body> </html>