本文主要給大家介紹了關(guān)于利用10行js代碼實(shí)現(xiàn)滾動(dòng)公告效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。希望能幫助到大家。

需求

在最近的項(xiàng)目中需要實(shí)現(xiàn)公告欄滾動(dòng)顯示效果如下：

解決方案

1、 HTML

先建一個(gè)p層作為公告顯示區(qū)，里面包裹一個(gè)公告列表(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

固定公告欄顯示區(qū)域的高度(35px),每條公告信息(li)的高度也必須是這個(gè)高度(我這里偷懶就用了行高)，后面js中還要用到這個(gè)值。p,ul,li{margin: 0;padding: 0}/*先初始化一下默認(rèn)樣式*/

.notice {

width: 300px;/*單行顯示，超出隱藏*/

height: 35px;/*固定公告欄顯示區(qū)域的高度*/

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

封裝函數(shù) noticeUp.js

使用 jquery animate方法改變列表ul的marginTop值來(lái)實(shí)現(xiàn)滾動(dòng)效果;

知識(shí)點(diǎn)：

1、animate 回調(diào)函數(shù) animate 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。

2、appendTo() 方法

在被選元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容。

注意：指定內(nèi)容是當(dāng)前頁(yè)面中的某些元素，那么這些元素將從原位置上消失。簡(jiǎn)而言之，這相當(dāng)于一個(gè)移動(dòng)操作，而不是復(fù)制操作。/*

* 參數(shù)說(shuō)明

* obj : 動(dòng)畫(huà)的節(jié)點(diǎn)，本例中是ul

* top : 動(dòng)畫(huà)的高度，本例中是-35px;注意向上滾動(dòng)是負(fù)數(shù)

* time : 動(dòng)畫(huà)的速度，即完成動(dòng)畫(huà)所用時(shí)間，本例中是500毫秒，即marginTop從0到-35px耗時(shí)500毫秒

* function : 回調(diào)函數(shù)，每次動(dòng)畫(huà)完成，marginTop歸零，并把此時(shí)第一條信息添加到列表最后;

*

*/

function noticeUp(obj,top,time) {

$(obj).animate({

marginTop: top

}, time, function () {

$(this).css({marginTop:"0"}).find(":first").appendTo(this);

})

}

4、 封裝函數(shù)的調(diào)用

首先引入jQuery庫(kù)和自己的封裝插件

使用定時(shí)器setInterval來(lái)控制公告信息顯示的時(shí)間間隔，本例中是2000毫秒

$(function () {

// 調(diào)用 公告滾動(dòng)函數(shù)

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

});

大家覺(jué)得不錯(cuò)的話趕緊收藏起來(lái)吧。

相關(guān)推薦：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。