jQuery Marquee效果是一種常見的滾動文字特效,可以讓網(wǎng)頁上的標(biāo)題、廣告、新聞等文字內(nèi)容在一定時間內(nèi)不斷滾動顯示,增加頁面的互動性、吸引力和用戶體驗。
//在標(biāo)簽中先引入jQuery插件 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>//在標(biāo)簽中使用jQuery代碼實現(xiàn)Marquee效果: <script>$(document).ready(function(){ // 設(shè)置滾動速度和間隔時間 var speed = 50; var pause = 2000; // 獲取需要滾動的文本內(nèi)容 var content = $('marquee').text(); // 每次滾動時添加一個空格,實現(xiàn)文本不斷滾動 $('marquee').html(' ' + content + ' '); // 利用setInterval()函數(shù)實現(xiàn)文本不斷滾動 var ticker = setInterval(function(){ $('marquee').animate({marginLeft: '-=1'}, speed, function(){ var s = $('marquee').css('marginLeft'); if (s == '-'+$('marquee').width()+'px') { // 當(dāng)滾動到文本尾部時暫停一段時間再重新開始滾動 clearInterval(ticker); setTimeout(function(){ $('marquee').css('marginLeft', '0'); ticker = setInterval(function(){ $('marquee').animate({marginLeft: '-=1'}, speed, function(){ var s = $('marquee').css('marginLeft'); if (s == '-'+$('marquee').width()+'px') { $('marquee').css('marginLeft', '0'); } }); }, speed); }, pause); } }); }, speed); }); </script>//在
上述代碼實現(xiàn)了一種基礎(chǔ)的jQuery Marquee效果,可以通過修改speed和pause參數(shù)值、改變文本內(nèi)容和樣式等方式進(jìn)行個性化設(shè)定和調(diào)整。