JavaScript 百叶窗效果

🌙
手机阅读
本文目录结构

代码第一部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百叶窗效果的布局</title>
    <style>
        #container{
            width: 816px;
            height: 582px;
            position: relative;
            background: orange;
        }
        #container div{
            display: block;
            position: absolute;
            background: url("img/zhume.jpg") repeat 0 0;
        }
    </style>
</head>
<body>
<img src="img/zhume.jpg" alt="图片"/>
<div id="container"></div>
</body>
</html>
<script>
    /*下面是百叶窗,布局*/
    var container=document.getElementById("container");
    var rows=5;
    var cols=10;
    var w=container.offsetWidth/cols;//每个DIV的宽;
    var h=container.offsetHeight/rows;//每个DIV的宽;

    for(var i= 0,len=rows*cols;i<len;i++){
        var oDiv=document.createElement("div");
        container.appendChild(oDiv);
/*        i%cols;//这是列号;
        Math.floor(i/cols);//这是行号;*/
        var l=i%cols*w;
        var t=Math.floor(i/cols)*h;
        oDiv.style.left=l+"px";
        oDiv.style.top=t+"px";
        oDiv.style.height=h+"px";
        oDiv.style.width=w+"px";
        oDiv.style.backgroundPosition=-l+"px -"+t+"px";//图片背景定位;
    }
</script>

代码第二部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百叶窗效果</title>
    <style>
        #container{
            width: 816px;
            height: 434px;
            position: relative;
            background: orange;
        }
        #container div{
            display: block;
            position: absolute;
            background: url("img/zhume.jpg") repeat 0 0;
        }
        #btn1{width: 100px;height: 30px;position: absolute;left: 716px;top:450px;}
    </style>
</head>
<body>
<div id="container"></div>
<input type="button" value="按钮1" id="btn1"/>
</body>
</html>
<script src="starMove.js"></script>
<script>
    /*下面是百叶窗,布局*/
    var container=document.getElementById("container");
    var rows=3;
    var cols=10;
    var w=container.offsetWidth/cols;//每个DIV的宽;
    var h=container.offsetHeight/rows;//每个DIV的宽;
    var a=[];

    for(var i= 0,len=rows*cols;i<len;i++){
        var oDiv=document.createElement("div");
        container.appendChild(oDiv);
        var l=i%cols*w;
        var t=Math.floor(i/cols)*h;

        oDiv.t=t;//把最终的目的地保存在自定义属性上;
        oDiv.l=l;
        oDiv.style.height=h+"px";
        oDiv.style.width=w+"px";
        oDiv.style.backgroundPosition=-l+"px -"+t+"px";//图片背景定位;
        //通过设置left和top把DIV隐藏起来
        if(Math.floor(i/cols)===0){
            oDiv.style.left=-1000+l+"px";
            oDiv.style.top=-500+t+"px";
        }else if(Math.floor(i/cols)===1){
            oDiv.style.left=-1000+l+"px";
            oDiv.style.top=t+"px";
        }else if(Math.floor(i/cols)===2){
            oDiv.style.left=-1000+l+"px";
            oDiv.style.top=500+t+"px";
        }
        /*DIV放到数组里*/
        a.push(oDiv);
    }

    var oBtn1=document.getElementById("btn1");
    oBtn1.onclick=function(){
        for(i=0,len= a.length;i<len;i++){
            (function(i){
                setTimeout(function(){
                    starMove(a[i],{left:a[i].l,top:a[i].t},600,9)
                },i%cols*100)
            })(i)
       }
    };
</script>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>