jQuery文字横向滚动效果的实现代码
很多网站都有公告，并且都喜欢用横向滚动的方式来展现。最近自己用jQuery也写了文字横向滚动，实现了自定义滚动速度，鼠标经过时暂停的功能。
HTML代码如下：
<divid="s"style="width:100px;position:relative;white-space:nowrap;overflow:hidden;height:20px;"> <divid="noticeList"style="position:absolute;top:0;height:20px;"><span>jQuery文字横向滚动</span><span>jQuery制作文字横向滚动</span><span>www.nhooo.com</span></div> </div>
JS代码：
方法一：
$.fn.textScroll=function(){
varspeed=60,flag=null,tt,that=$(this),child=that.children();
varp_w=that.width(),w=child.width();
child.css({left:p_w});
vart=(w+p_w)/speed*1000;
functionplay(m){
vartm=m==undefined?t:m;
child.animate({left:-w},tm,"linear",function(){
$(this).css("left",p_w);
play();
});
}
child.on({
mouseenter:function(){
varl=$(this).position().left;
$(this).stop();
tt=(-(-w-l)/speed)*1000;
},
mouseleave:function(){
play(tt);
tt=undefined;
}
});
play();
}
方法二：
$.fn.textScroll=functioon(){
varp=$(this),
c=p.children(),
speed=3000;//值越大，速度越小
varcw=c.width(),pw=p.width();
vart=(cw/100)*speed;
varf=null,t1=0;
functionani(tm){
counttime();
c.animate({left:-cw},tm,"linear",function(){
c.css({left:pw});
clearInterval(f);
t1=0;
t=((cw+pw)/100)*speed;
ani(t);
});
}
functioncounttime(){
f=setInterval(function(){
t1+=10;
},10);
}
p.on({
mouseenter:function(){
c.stop(false,false);
clearInterval(f);
console.log(t1);
},
mouseleave:function(){
ani(t-t1);
console.log(t1);
}
});
ani(t);
}
最后调用$("#s").textScroll();
以上这篇jQuery文字横向滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。