本文主要給大家介紹了關于利用10行js代碼實現滾動公告效果的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧。希望能幫助到大家。

需求

在最近的項目中需要實現公告欄滾動顯示效果如下：

解決方案

1、 HTML

先建一個p層作為公告顯示區，里面包裹一個公告列表(ul);

• 第1條公告第1條公告第1條公告第1條公告第1條公告第1條公告
• 第2條公告第2條公告第2條公告第2條公告第2條公告第2條公告
• 第3條公告第3條公告第3條公告第3條公告第3條公告第3條公告
• 第4條公告第4條公告第4條公告第4條公告第4條公告第4條公告

2、 CSS

固定公告欄顯示區域的高度(35px),每條公告信息(li)的高度也必須是這個高度(我這里偷懶就用了行高)，后面js中還要用到這個值。p,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毫秒

$(function () {

// 調用 公告滾動函數

setInterval("noticeUp('.notice ul','-35px',500)", 2000);

});

大家覺得不錯的話趕緊收藏起來吧。

相關推薦：

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的php公告滚动源码,10行js代码实现上下滚动公告效果方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。