溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求
在最近的項目中需要實現公告欄滾動顯示效果如下：
解決方案
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 函數執行完之后，要執行的函數。
2、appendTo() 方法
在被選元素的結尾（仍然在內部）插入指定內容。
注意：指定內容是當前頁面中的某些元素，那么這些元素將從原位置上消失。簡而言之，這相當于一個移動操作，而不是復制操作。
/*
* 參數說明
* 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>
更多滾動公告方式：
https://www.jb51.net/article/129733.htm
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
