文字横向滚动效果

很多网站都有公告，并且都喜欢用横向滚动的方式来展现。最近自己用jQuery也写了文字横向滚动，实现了自定义滚动速度，鼠标经过时暂停的功能。

HTML

<div id="s" style="width:100px; position:relative; white-space:nowrap; overflow:hidden; height:20px;"> 
<div id="noticeList" style="position:absolute; top:0; height:20px;"><span>jQuery文字横向滚动</span><span>jQuery制作文字横向滚动</span><span>www.jb51.net</span></div> 
</div>

JS代码：

方法一：

$.fn.textScroll=function(){ 
var speed=60,flag=null,tt,that=$(this),child=that.children(); 
var p_w=that.width(), w=child.width(); 
child.css({left:p_w}); 
var t=(w+p_w)/speed * 1000; 
function play(m){ 
var tm= m==undefined ? t : m; 
child.animate({left:-w},tm,"linear",function(){ 
$(this).css("left",p_w); 
play(); 
}); 
} 
child.on({ 
mouseenter:function(){ 
var l=$(this).position().left; 
$(this).stop(); 
tt=(-(-w-l)/speed)*1000; 
}, 
mouseleave:function(){ 
play(tt); 
tt=undefined; 
} 
}); 
play(); 
}

方法二：

$.fn.textScroll=functioon(){ 
var p = $(this), 
c = p.children(), 
speed=3000;// 值越大,速度越小 
var cw = c.width(),pw=p.width(); 
var t = (cw / 100) * speed; 
var f = null, t1 = 0; 
function ani(tm) { 
counttime(); 
c.animate({ left: -cw }, tm, "linear", function () { 
c.css({ left: pw }); 
clearInterval(f); 
t1 = 0; 
t=((cw+pw)/100)*speed; 
ani(t); 
}); 
} 
function counttime() { 
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();