JQuery 跑馬燈是一種非常常見(jiàn)的網(wǎng)頁(yè)動(dòng)畫(huà)效果，它可以使一些信息在頁(yè)面上不斷滾動(dòng)。這是 JQuery 庫(kù)中內(nèi)置的一種函數(shù)。
要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的跑馬燈，只需要使用 JQuery 提供的 .animate() 函數(shù)。下面是一個(gè)簡(jiǎn)單的示例代碼：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="marquee" style="overflow: hidden; white-space: nowrap;">
<span>這是跑馬燈的內(nèi)容</span>
</div>
<script>
$(document).ready(function(){
animateMarquee();
});
function animateMarquee() {
var marquee = $('#marquee');
var marqueeWidth = marquee.width();
var span = marquee.find('span');
var spanWidth = span.width();
var speed = 50;
var animate = function() {
span.css('margin-left', marqueeWidth);
span.animate({
'margin-left': -spanWidth
}, marqueeWidth / speed * 1000, 'linear', function() {
animate();
});
};
animate();
}
</script>
</body>
</html>在上述代碼中，我們首先創(chuàng)建了一個(gè)<div>元素，設(shè)置其 ID 為 “marquee”（供 JQuery 使用）并設(shè)置 CSS 樣式以隱藏文本溢出的部分。
接下來(lái)，我們?cè)诖a中添加了一些 JS 功能，通過(guò)animateMarquee()函數(shù)遞歸地實(shí)現(xiàn)了跑馬燈的動(dòng)畫(huà)效果。在實(shí)現(xiàn)中，我們通過(guò)讓文本的邊緣始終在容器的最右側(cè)和最左側(cè)之間滾動(dòng)，來(lái)給人一種滾動(dòng)的感覺(jué)。
當(dāng)然，實(shí)現(xiàn)一個(gè)有更多功能和選項(xiàng)的跑馬燈需要更多的代碼。例如，你可以添加一個(gè)控制速度的選項(xiàng)，或在停止動(dòng)畫(huà)的情況下停止?jié)L動(dòng)。不過(guò)，在很短的時(shí)間內(nèi)，你就可以在你的網(wǎng)站上將簡(jiǎn)單的 jquery 跑馬燈添加到標(biāo)準(zhǔn)的 JQuery 庫(kù)中。
上一篇jquery 透明