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函数,使得文字滚动不断进行。