SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下滚动公告</title>
    <style>
        *{margin: 0px; padding: 0px; list-style: none; line-height: 1;}
        #notice{height: 30px; line-height: 30px; overflow: hidden; width: 120px; padding: 0px 20px;}
    </style>
</head>
<body>
    <!-- 
        结构想法:
        notice是一块展示区,负责展示li中的信息
        展示行为通过上下移动ul来改变notice中的展示内容
     -->
    <div id="notice">
        <ul>
            <li>这是一条公告1</li>
            <li>这是一条公告2</li>
            <li>这是一条公告3</li>
            <li>这是一条公告4</li>
        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        // 制作思路:
        // 首先克隆第一个li到最后位置,然后ul使用margin-top滚动.
        // 临界条件:当Ul移动到了最后克隆的li的位置时,marginTop归零
        function scrollNotice(){
            var notice = $('#notice');
            var ul = notice.find('ul');
            var li = notice.find('li');
            var noticeH = notice.height();
            var duration = 3000;
            var index = 0;
            var timer = null;
            init()//初始化结构样式


            function toMove(){
                index++;
                notice.find('ul').animate({marginTop:-noticeH *index },'swing',function(){
                    if(index == notice.find('li').length - 1){
                        index = 0;
                        ul.css('marginTop',0)
                    }
                })
            }
            function init(){
                li.css({lineHeight:noticeH+'px'});
                // 克隆第一条
                li.eq(0).clone().appendTo(ul);
                timer = setInterval(toMove,duration)//启动计时器
                bindEvent();//绑定事件
            }
            
            function bindEvent(){
                ul.on('mouseover','li',function(){
                   clearInterval(timer);
                   timer = null 
                })
                ul.on('mouseout','li',function(){
                    timer = setInterval(toMove,duration)//启动计时器
                })
            }
        }
        scrollNotice();
    </script>
</body>
</html>