无缝向上滚动小广告（原生）

这个很简单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{padding:0;margin:0;}
    div{
        width:200px;
        height:20px;
        position:relative;
        margin:80px;
        overflow:hidden;
        /*border:1px solid red;*/

    }
        ul{
            position:absolute;
            left:0;
            width:50px;
            font-size:0;
        }
        li{list-style: none;font-size:16px;height:20px;width:200px;float:left;}
    </style>
</head>
<body>
    <div>
        <ul id='ul'>
            <li style='background:red;'>第一个</li>
            <li style='background:yellow;'>第二个</li>
            <li style='background:pink;'>第三个</li>
            <li style='background:green;'>第四个</li>
            <li style='background:blue;'>第五个</li>
            <li style='background:red;'>第一个</li>
            <li style='background:yellow;'>第二个</li>
            <li style='background:pink;'>第三个</li>
            <li style='background:green;'>第四个</li>
            <li style='background:blue;'>第五个</li>
        </ul>
    </div>
    <script>
    /*
        无缝向上滚动小广告（原生）
    */
    var num = 0;
    var Time;
    var ul = document.getElementById('ul');
    var li = ul.getElementsByTagName('li');//获取li 的集合
    var liHeight = li[0].offsetHeight;//获取li的高度
    var t = setInterval(rem,30);
        function rem(){
            ul.style.top = '-'+num +'px';
            num++;
            if(num == liHeight){
                clearInterval(t);
                num = 0;
                ul.style.top = num + 'px';
                ul.appendChild(li[0]);
                Time = setTimeout(tt,1000);
            }
        }
        function tt(){
            t = setInterval(rem,30);
            clearTimeout(Time);
        }
    </script>
</body>
</html>

 

posted @ 2016-10-13 14:07  大厨的笔记  阅读(195)  评论(0)  编辑  收藏  举报