jQuery實現的上下滾動公告欄詳細講解
阿新 • • 發佈：2018-11-20
之前做專案的時候，一直都想著做一個上下滾動的公告欄，作為展示網站的最新公告資訊，因為剛開始自己的思路並不是太清晰，在網上找了很多的原始碼，但是卻發現都不能讓自己滿意，有的還會出現一些小問題，比如，有時候公告上下滾動的時候，兩條公告會重疊在一起。最後我還是決定自己寫一個上下滾動的公告欄。
jQuery實現上下滾動公告欄原理
雖然在網上找的有些程式碼有時候會出現一些問題，但是思路咱還是可以借鑑一下的。
我們先來看一下，我做的上下滾動公告欄效果圖，如果你感覺是你要的那款，那麼你再接著往下看是怎麼實現的。
圖中箭頭所指內容就是公告內容，它會不停的上下滾動，當然滾動時間可以自己設定的。
下面我們來看下是怎麼實現的。
其實實現滾動效果主要用到jQuery中的animate() 方法，而animate() 方法就是建立動畫效果，簡單的說就是，當我們用js將“一棵樹”的height屬性從100px變為200px的時候，我們會看到“這個樹”瞬間從100高度長到了200高度，但是我們用animate() 方法，我們會看到“這顆樹”從100高度慢慢的長到200高度，我們可以看到這個過程，這就是animate() 方法的作用，當然“樹”的生長速度是可以控制的。
瞭解了jQuery的animate()方法，我們還需要了解一下setInterval( )這個方法，可能很多同學知道這個方法，因為它就是一個簡單的定時函式，我們看一下它的用法
setInterval(function(){ alert("Hello"); }, 3000);
這句程式碼就是每過3秒執行一次該方法，彈出一個“hello”。
好了，理解了前面的兩個方法，那麼下面的程式碼你一定可以看懂得。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>滾動公告欄</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <style type="text/css"> body{padding: 0;margin:0;background-color:#f9f9f9} .ul1{list-style: none;margin: 0} li{padding: 5px;} </style> </head> <body> <div style="height: 60px;background-color: #191e29;"> <p style="margin: 0;color: #fff;line-height: 60px;text-align: center;">這是用jQuery實現的上下滾動公告欄</p> </div> <div style="background-image: url(timg.jpg); margin:15px 90px 0 90px;padding-left: 310px; height: 600px;"> <div style="position: relative;height: 26px;overflow: hidden;"> <ul class="ul1"> <li>K先生：我求求你嫁給我</li> <li>K先生：等你老了，我依然揹著你</li> <li>K先生：我給你當柺杖</li> <li>K先生：等你沒牙了，我就嚼碎了再餵給你吃</li> </ul> <img style="position: absolute;top: 9px;left: 20px" width="15px" height="15px" src="laba.png"> </div> </div> <script type="text/javascript"> $(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); } }); </script> </body> </html>
如果你有更好得建議或者問題，歡迎下方留言哦。
本篇文章來自K先生的部落格（有原始碼哦）。