JS实现信息间歇滚动效果 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style>
    div{
        width:400px;
        height:250px;
        background-color:#ddd;
        border:1px solid #000;
        margin:100px auto;
        overflow:hidden;
    }
    ul{
        list-style-type:none;
        font-size:18px;
        line-height:40px;
        padding:0 10px;
        margin:0;
    }
    li{
        background-color:#ccc;
    }
</style>
<script language="javascript" type="text/javascript">
    var scroll;
    var delay;
    var spd = 10;
    var delaytime = 1000;
    window.onload = function(){
        var div = document.getElementsByTagName('div')[0];
        div.innerHTML += div.innerHTML;
        delay = setTimeout(start,delaytime);
        div.onmouseover = function(){
            clearInterval(scroll);
            clearTimeout(delay);
        };
        div.onmouseout = function(){
            delay = setTimeout(start,delaytime);
        };
    }

    function start(){
        clearInterval(scroll);
        clearTimeout(delay);
        scroll = setInterval(scrl,spd);
    }

    function scrl(){
        var div = document.getElementsByTagName('div')[0];
        var ul = document.getElementsByTagName('ul')[0];
        if(div.scrollTop>=ul.offsetHeight){
            div.scrollTop = 0;
        }else{
            div.scrollTop++;
            if(div.scrollTop % 80 == 0){
                clearInterval(scroll);
                delay = setTimeout(start,delaytime);
            }
        }
    }

</script>
</head>
<body>
    <div>
        <ul>
            <li>1、第一行第一行第一行第一行第一行第一行</li>
            <li>2、第二行第二行第二行第二行第二行第二行</li>
            <li>3、第三行第三行第三行第三行第三行第三行</li>
            <li>4、第四行第四行第四行第四行第四行第四行</li>
            <li>5、第五行第五行第五行第五行第五行第五行</li>
            <li>6、第六行第六行第六行第六行第六行第六行</li>
            <li>7、第七行第七行第七行第七行第七行第七行</li>
            <li>8、第八行第八行第八行第八行第八行第八行</li>
        </ul>
    </div>
</body>
</html>

遇到的问题及注意事项：

1、css外边距合并问题。

参考：http://blog.sina.com.cn/s/blog_601b97ee0101b8xe.html

2、offsetWidth属性，包括width,padding,border，不包括margin。

posted @ 2017-05-15 18:59  oliverlht  阅读(169)  评论(0)  编辑  收藏  举报