jQuery是目前最流行的JavaScript庫之一,它提供了豐富的API,使得編寫JavaScript變得更加簡單。其中一個有趣的功能就是跑馬燈,下面是一個很簡單的jQuery跑馬燈代碼。
$(document).ready(function(){ // 獲取要滾動的元素 var marquee = $('.marquee'); // 獲取主體和文本寬度 var mainWidth = $('.main').width(); var textWidth = marquee.width(); // 設(shè)置初始位置(從主體右側(cè)開始) marquee.css('left', mainWidth); // 定義跑馬燈動畫 function animateMarquee(){ // 計算動畫時間 var time = (parseInt(marquee.css('left')) + textWidth) * 10; // 運(yùn)行動畫 marquee.animate({ left: -textWidth }, time, 'linear', function(){ // 動畫完成后,重新設(shè)置位置從主體右側(cè)開始 marquee.css('left', mainWidth); // 遞歸調(diào)用動畫 animateMarquee(); }); } // 開始跑馬燈動畫 animateMarquee(); });
上面的代碼首先使用jQuery選擇器獲取要滾動的元素,并記錄主體和文本的寬度。然后設(shè)置初始位置從主體右側(cè)開始,并定義一個遞歸動畫函數(shù)來實現(xiàn)跑馬燈效果。最后調(diào)用該函數(shù)實現(xiàn)動畫。
使用jQuery跑馬燈功能可以使網(wǎng)頁更生動有趣,并提升用戶體驗。