超级简单的公告逐条循环滚动 ^^

一开始想着要自己写，从哪里开头呢？

找插件吧。
呃，还是自己写吧。
要不还是找个插件吧，我找啊找啊找啊找。不合适吶。。。

终于看到个源码，还是自己写吧。

超级简单的，思路为：

1. 只需把公告整体先向上滑动以遮住第一条；

2. 滑动结束后，恢复原来现状，把第一个元素放于最后一个元素之后

反之向上滚动

源码：https://github.com/Vanessa219/bowknot/blob/8d09a8192ca1d596947c432e1f6ab68b0adc4a35/web/development-bundle/demo/scroll/chart.html

JavaScript Code

           var scrollNoticeNext = function () {
                var $notice = $("#notice"),
                $first = $notice.find("li:first");
                $notice.animate({
                    marginTop: "-" + $first.height() + "px"
                },500,function(){
                    $notice.css({
                        marginTop: "0px"
                    });
                    $first.appendTo($notice);
                });
            };
        var scrollNoticePre = function () {
            var $notice = $("#notice"),
            $last = $notice.find("li:last");
            $last.prependTo($notice);
            $notice.css("marginTop", "-" + $last.height() + "px");
            $notice.animate({
                marginTop: 0
            },500);
        };
        
        (function () {
            var timerID = window.setInterval(scrollNoticeNext, 2000);
            
            $("#notice").hover(function () {
                window.clearInterval(timerID);
            }, function () {
                timerID = window.setInterval(scrollNoticeNext, 2000);
            });
        })();</pre>

 
HTML Code
                <button onclick="scrollNoticeNext()">Next</button>
                <button onclick="scrollNoticePre()">Pre</button>
                <div style="height: 38px; overflow: hidden;">
                    <ul id="notice">
                        <li>
                            111111111111111111
                        </li>
                        <li>
                            222222222222222222222
                        </li>
                        <li>
                            3333333333333333333333
                        </li>
                        <li>
                            4444444444444444
                        </li>
                        <li>
                            5555555555555555
                        </li>
                    </ul>
                </div>

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！