jQuery實現的上下滾動公告欄詳細講解

之前做項目的時候，一直都想著做一個上下滾動的公告欄，作為展示網站的最新公告信息，因為剛開始自己的思路並不是太清晰，在網上找了很多的源碼，但是卻發現都不能讓自己滿意，有的還會出現一些小問題，比如，有時候公告上下滾動的時候，兩條公告會重疊在一起。最後我還是決定自己寫一個上下滾動的公告欄。

jQuery實現上下滾動公告欄原理

雖然在網上找的有些代碼有時候會出現一些問題，但是思路咱還是可以借鑑一下的。

我們先來看一下，我做的上下滾動公告欄效果圖，如果你感覺是你要的那款，那麼你再接著往下看是怎麼實現的。

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

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

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

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

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

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

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

 

 
 <title>滾動公告欄/<title>
 
 <style><br> body{padding: 0;margin:0;background-color:#f9f9f9}<br> .ul1{list-style: none;margin: 0}<br> li{padding: 5px;}<br> /<style>



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



 

 

 
K先生：我求求你嫁給我

 
K先生：等你老了，我依然揹著你

 
K先生：我給你當柺杖

 
K先生：等你沒牙了，我就嚼碎了再餵給你吃

 

  

 

閱讀更多 鈺兒愛編程 的文章

關鍵字: 上下 jQuery 編程語言