🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 链滴笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

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

一开始想着要自己写,从哪里开头呢?

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

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

超级简单的,思路为:

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>

 


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

留下你的脚步