JS 实现文字滚动显示

一、文字列表无缝滚动

<style type="text/css">
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #content li {
        font-size: 14px;
        height: 20px;
        line-height: 20px;
    }
    #scrollUpBox {
        height: 200px;
        padding: 0 15px;
        border: 2px solid #cccccc;
        border-radius: 5px;
        box-shadow: 0 0 10px #0000ff;
        overflow: hidden;
    }
</style>

<div id="scrollUpBox">
    <ul id="content">
        <li>测试内容1！</li>
        <li>测试内容2！</li>
        <li>测试内容3！</li>
        <li>测试内容4！</li>
        <li>测试内容5！</li>
        <li>测试内容6！</li>
        <li>测试内容7！</li>
        <li>测试内容8！</li>
        <li>测试内容9！</li>
        
        <li>测试内容1！</li>
        <li>测试内容2！</li>
        <li>测试内容3！</li>
        <li>测试内容4！</li>
        <li>测试内容5！</li>
        <li>测试内容6！</li>
        <li>测试内容7！</li>
        <li>测试内容8！</li>
        <li>测试内容9！</li>
    </ul>
</div>

<script type="text/javascript">            
    var scrollUpBox = document.getElementById('scrollUpBox');
    var content = document.getElementById('content');
    function scrollUp() {
        if (scrollUpBox.scrollTop >= (content.clientHeight - scrollUpBox.clientHeight)) {
            scrollUpBox.scrollTop = 0;
        } else {
            scrollUpBox.scrollTop++;
        }
    }                
    var TIME = 50;
    var timer = setInterval(scrollUp, TIME);
    scrollUpBox.onmouseover = function() {
        clearInterval(timer);
    }
    scrollUpBox.onmouseout = function() {
        timer = setInterval(scrollUp, TIME);
    }
</script>

部分效果图如下：

二、文字字幕横向滚动

<style type="text/css">
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #content li {
        font-size: 14px;
        height: 20px;
        line-height: 20px;
    }
    #scrollUpBox {
        height: 200px;
        padding: 0 15px;
        border: 2px solid #cccccc;
        border-radius: 5px;
        box-shadow: 0 0 10px #0000ff;
        overflow: hidden;
    }

    #scrollLeftBox {
        width: 100px;
        padding: 10px 15px;
        font-size: 20px;
        border: 2px solid #cccccc;
        border-radius: 5px;
        box-shadow: 0 0 10px #0000ff;
    }
</style>

<input type="text" id="scrollLeftBox">

<script type="text/javascript">
    var str = ' 123 456 789 ';
    var scrollLeftBox = document.getElementById('scrollLeftBox');
    function scrollLeft() {
        scrollLeftBox.value = str;
        str = str.substring(1, str.length) +　str.substring(0, 1);
    }                
    setInterval(scrollLeft, 500);
</script>

部分效果图如下：