淘先锋技术网

首页 1 2 3 4 5 6 7

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