需求
在最近的項目中需要實現公告欄滾動顯示效果如下：
解決方案
1、 HTML
先建一個div層作為公告顯示區，里面包裹一個公告列表(ul);
<div class="notice"> <ul> <li>第1條公告第1條公告第1條公告第1條公告第1條公告第1條公告</li> <li>第2條公告第2條公告第2條公告第2條公告第2條公告第2條公告</li> <li>第3條公告第3條公告第3條公告第3條公告第3條公告第3條公告</li> <li>第4條公告第4條公告第4條公告第4條公告第4條公告第4條公告</li> </ul></div>
2、 CSS
固定公告欄顯示區域的高度（35px）,每條公告信息（li）的高度也必須是這個高度（我這里偷懶就用了行高），后面js中還要用到這個值。
div,ul,li{margin: 0;padding: 0}/*先初始化一下默認樣式*/.notice { width: 300px;/*單行顯示，超出隱藏*/ height: 35px;/*固定公告欄顯示區域的高度*/ padding: 0 30px; background-color: #b3effe; overflow: hidden;}.notice ul li { list-style: none; line-height: 35px; /*以下為了單行顯示，超出隱藏*/ display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}3、 JavaScript
封裝函數 noticeUp.js
使用 jquery animate方法改變列表ul的marginTop值來實現滾動效果;
知識點：
1、animate 回調函數 animate 函數執行完之后，要執行的函數。
在被選元素的結尾（仍然在內部）插入指定內容。
注意：指定內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這相當于一個移動操作，而不是復制操作。
/** 參數說明* obj : 動畫的節點，本例中是ul* top : 動畫的高度，本例中是-35px;注意向上滾動是負數* time : 動畫的速度，即完成動畫所用時間，本例中是500毫秒，即marginTop從0到-35px耗時500毫秒* function : 回調函數，每次動畫完成，marginTop歸零，并把此時第一條信息添加到列表最后;* */ function noticeUp(obj,top,time) { $(obj).animate({ marginTop: top }, time, function () { $(this).css({marginTop:"0"}).find(":first").appendTo(this); })}4、 封裝函數的調用
首先引入jQuery庫和自己的封裝插件
使用定時器setInterval來控制公告信息顯示的時間間隔，本例中是2000毫秒
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script src="noticeUp.js"></script> <script> $(function () { // 調用 公告滾動函數 setInterval("noticeUp('.notice ul','-35px',500)", 2000); });</script>更多滾動公告方式：
//m.survivalescaperooms.com/article/129733.htm
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
