1. 程式人生 > >jQuery實現的上下滾動公告欄詳細講解

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”。
好了,理解了前面的兩個方法,那麼下面的程式碼你一定可以看懂得。

<!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先生的部落格(有原始碼哦)。