jquery Text horizontal scrolling effect of the implementation code _jquery

A lot of websites have announcements, and they all like to show in a way that scrolls horizontally. Recently I also wrote the text in jquery scrolling horizontally, to achieve a custom scrolling speed, the mouse after the pause function.

The HTML code is as follows:

<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 Text horizontal scrolling </span><span>jquery make text scroll </span><span>www.jb51.net</ Span></div> 

</div>

JS Code:

Method One:

$.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 (); 

}

Method Two:

$.fn.textscroll=functioon () { 

var p = $ (this), 

C = P.children (), Greater 

speed=3000;//value, smaller speed 

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 + =;} 

; 

} 

P.on ({ 

mouseenter:function () { 

c.stop (false, false); 

Clearinterval (f); 

Console.log (t1); 

}, 

mouseleave:function () { 

ani (T-T1); 

Console.log (t1); 

} 

); 

ANI (t); 

}

The Last Call $ ("#s"). Textscroll ();

The above jquery text horizontal scrolling effect of the implementation code is small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.