jQuery實現上下滾動公告欄詳細實例

龍行????web前端????2018-11-28????2693????1評論

分享一個實現網站公告欄的jquery案例，網上有很多案例但是都會出現一些小問題，也懶得去改，自己瞎琢磨吧，找到了

圖中箭頭所指內容就是公告內容，它會不停的上下滾動，當然滾動時間可以自己設置的。

下面我們來看下是怎么實現的。

其實實現滾動效果主要用到jQuery中的animate() 方法，而animate() 方法就是創建動畫效果，簡單的說就是，當我們用js將“一棵樹”的height屬性從100px變為200px的時候，我們會看到“這個樹”瞬間從100高度長到了200高度，但是我們用animate() 方法，我們會看到“這顆樹”從100高度慢慢的長到200高度，我們可以看到這個過程，這就是animate() 方法的作用，當然“樹”的生長速度是可以控制的。

了解了jQuery的animate()方法，我們還需要了解一下setInterval( )這個方法，可能很多同學知道這個方法，因為它就是一個簡單的定時函數，我們看一下它的用法

setInterval(function(){ alert("Hello"); }, 3000);

這句代碼就是每過3秒執行一次該方法，彈出一個“hello”。

好了，理解了前面的兩個方法，那么下面的代碼你一定可以看懂得。

公告欄上下滾動

body{padding: 0;margin:0;background-color:#f9f9f9}

.ul1{list-style: none;margin: 0}

li{padding: 5px;}

這是用jQuery實現的上下滾動公告欄

• LongX：明天星期一，心情好
• LongX：先去吃個大餐，再去上班班
• LongX：后天星期二
• LongX：苦逼的一天

$(function(){

var num=$(".ul1").find("li").length;

console.log("直接運行"+num);

if (num>1) {

setInterval(function(){

$('.ul1').animate({

marginTop:"-26px"

},500,function(){

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

});

}, 3000);

}

});

評論一下

贊助站長

贊助站長X

版權申明：此文如未標注轉載均為本站原創，自由轉載請表明出處《龍行博客》。

本文網址：https://www.liaotaoo.cn/116.html

總結

以上是生活随笔為你收集整理的html 公告栏 上下滚动,jQuery实现上下滚动公告栏详细实例的全部內容，希望文章能夠幫你解決所遇到的問題。

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