javascript实例学习之六

javascript实例学习之六—百叶窗效果

一、要结合布局才能形成百叶窗的效果

二、开启两个定时器，第一个定时器控制的是百叶窗整体一次上翻，一次下翻；另一个控制百叶窗中的各页逐次翻转，形成层次效果。否则就成了普通的滚动广告的效果了

本实现借助于自己实现的base.js和tool.js 。重点是利用了其中的animate函数

1.页面布局代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <style>
        *{margin:0; padding:0; }
        ul{300px;}
        ul>li{list-style: none;height:30px;   overflow: hidden;border-bottom: 1px dashed #000;}
        li>div{margin:0; padding:0;position:relative;top:0;}
        ul p{height:30px;line-height: 30px;}

    </style>
</head>
    
<body>
    <ul >
        <li>
            <div>
                <p>11111111111111111</p>
                <p>22222222222222222</p>
            </div>
        </li>
        <li>
            <div>
                <p>333333333333333333</p>
                <p>444444444444444444</p>
            </div>
        </li>
        <li>
            <div>
                <p>5555555555555555555</p>
                <p>6666666666666666666</p>
            </div>
        </li>
        <li>
            <div>
                <p>7777777777777777777</p>
                <p>8888888888888888888</p>
            </div>
        </li>
        <li>
            <div>
                <p>99999999999999999999</p>
                <p>00000000000000000000</p>
            </div>
        </li>
    </ul>
    <script src="./commonJs/tool.js"></script>
    <script src="./commonJs/base.js"></script>
    <script src="./usualEffects/js/baiyechuang.js"></script>
     
</body>

</html>

百叶窗html布局

2.相关js代码

/*
 * 尝试实现百叶窗效果
 */
//需要两个定时器
$(function() {
    var oUl = document.getElementsByTagName('ul')[0];
    showBaiye(oUl);

    function showBaiye(oUl) {
        var divs = oUl.getElementsByTagName('div');
        var flag = true;
        var iNow = 0;
        var timer;
        //每4s百叶窗整体翻动一次，一次上翻，一次下凡
        setInterval(function() {
            
            //如果不开定时器的话,就没有层次的效果了,就是普通轮播图的效果
            // for (var i = 0; i < divs.length; i++) {
            //     $(divs[i]).animate({ 'top': '-30px' }, null, 100);
            // };
            //每隔300ms每一个百叶逐个翻动，形成层次效果
            timer = setInterval(changeItem, 300);
            flag=!flag;
        }, 4000);

        function changeItem() {
            var endValue = flag ? '-30px' : '0';
            $(divs[iNow]).animate({ 'top': endValue }, null, 100);
            iNow++;
            if (iNow == divs.length) {
                iNow = 0;
                clearInterval(timer);
                
            }
        }
    }
   

     

});