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

需求

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

解決方案

1、 HTML

先建一個p層作為公告顯示區(qū)，里面包裹一個公告列表(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)的高度也必須是這個高度(我這里偷懶就用了行高)，后面js中還要用到這個值。p,ul,li{margin: 0;padding: 0}/*先初始化一下默認樣式*/

.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值來實現(xiàn)滾動效果;

知識點：

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

2、appendTo() 方法

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

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

* 參數(shù)說明

* obj : 動畫的節(jié)點，本例中是ul

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

* time : 動畫的速度，即完成動畫所用時間，本例中是500毫秒，即marginTop從0到-35px耗時500毫秒

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

*

*/

function noticeUp(obj,top,time) {

$(obj).animate({

marginTop: top

}, time, function () {

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

})

}

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

首先引入jQuery庫和自己的封裝插件

使用定時器setInterval來控制公告信息顯示的時間間隔，本例中是2000毫秒

$(function () {

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

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

});

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

相關(guān)推薦：

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

總結(jié)

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

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