| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 579 人关注过本帖
标题:求教,百叶窗 效果
取消只看楼主 加入收藏
straysh
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2011-10-18
收藏
 问题点数:0 回复次数:0 
求教,百叶窗 效果
求教,代码运行没有报错,但是没有带到预期的效果
程序代码:
<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>
搜索更多相关主题的帖子: 百叶窗 html absolute position border 
2011-10-22 16:57
快速回复:求教,百叶窗 效果
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.031623 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved