HTML是網頁開發的基礎語言之一,而HTML中的marquee標簽可以用于制作一些滾動文字的效果,但這種方法現在已經被HTML5廢棄。不過,我們可以使用jQuery來實現類似的效果。
//HTML代碼 <div id="marquee"> <p>滾動文字效果</p> </div> //jQuery代碼 $(function(){ //獲取marquee元素 var $marquee = $('#marquee'); //復制marquee元素內容 var $marqueeClone = $marquee.clone(); //將復制的元素插入到原元素后面 $marquee.after($marqueeClone); //滾動動畫 function scrollMarquee(){ //加載動畫 $marquee.animate({marginLeft:'-200px'}, 1000, 'linear', function(){ //將動畫元素的margin-left值設為初始值 $marquee.css('marginLeft','200px'); //調用scrollMarquee函數 scrollMarquee(); }); } //調用scrollMarquee函數 scrollMarquee(); });
上面的代碼中,我們首先通過jQuery獲取了id為marquee的元素,并復制了該元素的內容。然后將復制的元素插入到原元素的后面,這樣可以使得文字滾動無限循環。最后我們使用animate方法對元素進行滾動動畫,設置marginLeft的變化實現滾動效果,動畫完成后將marginLeft重置為初始值,并且調用scrollMarquee函數,使得文字滾動不斷進行。