溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
之前做項目的時候，一直都想著做一個上下滾動的公告欄，作為展示網站的最新公告信息，因為剛開始自己的思路并不是太清晰，在網上找了很多的源碼，但是卻發現都不能讓自己滿意，有的還會出現一些小問題，比如，有時候公告上下滾動的時候，兩條公告會重疊在一起。最后我還是決定自己寫一個上下滾動的公告欄。
雖然在網上找的有些代碼有時候會出現一些問題，但是思路咱還是可以借鑒一下的。
我們先來看一下，我做的上下滾動公告欄效果圖，如果你感覺是你要的那款，那么你再接著往下看是怎么實現的。
圖中箭頭所指內容就是公告內容，它會不停的上下滾動，當然滾動時間可以自己設置的。
下面我們來看下是怎么實現的。
其實實現滾動效果主要用到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 >
<p >這是用jQuery實現的上下滾動公告欄</p>
</div>
<div >
<div >
<ul class="ul1">
<li>K先生：我求求你嫁給我</li>
<li>K先生：等你老了，我依然背著你</li>
<li>K先生：我給你當拐杖</li>
<li>K先生：等你沒牙了，我就嚼碎了再喂給你吃</li>
</ul>
<img 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實現上下滾動公告欄詳細代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
