百叶窗

作者: lucky_yao | 来源:发表于2020-10-20 07:50 被阅读0次

通风百叶窗@厂房通风百叶窗@通风百叶窗产地货源
他自称梵高，寿162载
锌钢百叶窗会给人一种快乐的感觉？
百叶窗怎么拉上去百叶窗帘的选购方法
百叶窗为什么总想和你作对？
美家神器——百叶窗，你还没用吗？
夏日
工艺经验：钣金件加工工艺及规范——拉伸，成形和焊接
【生活】百叶窗怎么使用
关于动画效果不同步以及延迟的问题。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                display: block;
                margin: auto;
            }
            div{
                width: 100%;
                height: 70px;
                background: red;
                font-size: 50px;
                color: #fff;
                text-align: center;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <img src="images/timg.jpg"/>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </body>
    <script type="text/javascript">
        var odiv=document.getElementsByTagName('div');
        var m=0;
        var timer;
        //循环所有的div，给所有div的top属性从新赋值，好让所有的div都覆盖住img图片
        for(var i=0; i<odiv.length; i++){
            odiv[i].style.top=m+'px';
            m=m+70;
        }
        document.onclick=function(){
            //n的作用是赋值给div的
            var n=35;
            function fun(){
                n--;//69 68 67 66 65....
                if(n<0){
                    clearInterval(timer)
                }else{
                    //循环所有的div，让div的高度慢慢的消失
                    for(var j=0; j<odiv.length; j++){
                        odiv[j].style.height=n+'px';
                        //1 69  2 68 3 67
                    }
                }
            }
            timer=setInterval(fun,50)
        }
        
    </script>
</html>