文字无缝滚动

文字无缝滚动

html

<dl id="marquee" class="marquee">
    <dt>
        <ul class="right-content">
            <li>
                <a href="#" class="orderNum">BKCSHC161014002153</a> 
            </li>
            <li>
                <a href="#" class="orderNum">BKCSHC161014002153</a> 
            </li>
            <li>
                <a href="#" class="orderNum">BKCSHC161014002153</a> 
            </li>
            ...
        </ul>
    </dt>
    <dd></dd>
</dl>

js

<script>
        $(function(){
                Marquee("marquee");
        })

        //订单滚动
        var Marquee = function(id){
            var container = document.getElementById(id), 
            original = container.getElementsByTagName("dt")[0], 
            clone = container.getElementsByTagName("dd")[0],
            liLength=original.getElementsByTagName("li").length,
            speed = 55;
            if(liLength<=8){
                return
            }
            clone.innerHTML = original.innerHTML;

            var rolling = function(){
                if (container.scrollTop === clone.offsetHeight) {
                    container.scrollTop = 0;
                }
                else {
                    container.scrollTop++;
                }
            }
            var timer = setInterval(rolling, speed)//设置定时器
            container.onmouseover = function(){
                clearInterval(timer)
            }//鼠标移到marquee上时，清除定时器，停止滚动
            container.onmouseout = function(){
                timer = setInterval(rolling, speed)
            }//鼠标移开时重设定时器
        }       
        </script>

---