jQuery.Marquee.js是一款jQuery插件,它可以讓你的文本在頁面上滾動。在這篇文章中,我們將會學習如何使用它。
首先,我們需要下載并引入jQuery和jQuery.Marquee.js文件。你可以通過以下代碼獲取它們:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
接下來,在你的HTML文件中,創建一個div元素,并在其中添加你希望滾動的文本。
<div id="my-marquee">
<p>這是一段需要滾動的文本。</p>
</div>
真正的魔法發生在你的JavaScript代碼中。你需要在文檔準備好之后調用jQuery.Marquee.js方法,并傳遞一些選項。例如:
$(document).ready(function(){
$('#my-marquee').marquee({
duration: 3000,
gap: 50,
delayBeforeStart: 0,
direction: 'left',
duplicated: true
});
});
這里我們傳遞了5個選項:
- duration:表示整個滾動過程的時間(以毫秒為單位)。
- gap:表示文本移動的間距(以像素為單位)。
- delayBeforeStart:表示在滾動開始之前的等待時間(以毫秒為單位)。
- direction:表示文本滾動的方向。
- duplicated:當滾動結束時,是否重新開始滾動。
現在你已經完成了jQuery.Marquee.js插件的基本用法。你可以根據自己的需求調整選項以達到最佳效果。
最后我們再提供一個樣式的代碼參考:
#my-marquee {
width: 200px;
height: 50px;
overflow: hidden;
border: 1px solid #ccc;
}
#my-marquee p {
white-space: nowrap;
margin: 0;
font-size: 16px;
}
以上就是jQuery.Marquee.js的基本用法。希望對你有幫助!
上一篇css 上下移動樣式