之前做項目的時候，一直都想著做一個上下滾動的公告欄，作為展示網站的最新公告信息，因為剛開始自己的思路并不是太清晰，在網上找了很多的源碼，但是卻發現都不能讓自己滿意，有的還會出現一些小問題，比如，有時候公告上下滾動的時候，兩條公告會重疊在一起。最后我還是決定自己寫一個上下滾動的公告欄。
雖然在網上找的有些代碼有時候會出現一些問題，但是思路咱還是可以借鑒一下的。
我們先來看一下，我做的上下滾動公告欄效果圖，如果你感覺是你要的那款，那么你再接著往下看是怎么實現的。
圖中箭頭所指內容就是公告內容，它會不停的上下滾動，當然滾動時間可以自己設置的。
下面我們來看下是怎么實現的。
其實實現滾動效果主要用到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>總結
以上所述是小編給大家介紹的jQuery實現上下滾動公告欄詳細代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
