jquery implementation of the page blinds Merry-go-style tumbling display effect of the method _jquery

This article illustrates the method of jquery merry-go-style tumbling display of the page blinds. Share to everyone for your reference. Specifically as follows:

1. The code here requires more than jquery1.3 support, as follows:

Copy Code code as follows:

JQuery.fn.extend (
Function ($) {
var L = 4,//Scroll line number
t=5000,//Scroll once, how long interval next start scrolling
rt=500,//each n scrolling past time consuming
N= "Li",//the HTML tag contained in the default scrolling object to scroll
O= "UL",//if scrolling, enabled wrapped scrolling element HTML markup
e,//Call Object
en,//A collection of all objects to scroll within the calling object
h;//scrolling Row Height
var vlimit=80;//is smaller than visual limit 0.1s.
var maxrnum=math.ceil (rt/vlimit);//MAX scrolling times
var maxrh=0;//per scrolling height
var fnrollfirst=function (ARG) {//to volume arg up 1 n, move 1th N to last position after completion
var rcount=0;//scrolling times Record
var rval=setinterval (function () {//Vlimit loop once, cycle maxRnum-1 times
rcount++;
Arg.scrolltop (Arg.scrolltop () +maxrh);
if (rcount>= (maxRnum-1)) {//less volume 1 times
Clearinterval (Rval);
Arg.scrolltop (Arg.scrolltop () +h-maxrh* (maxRnum-1))//last 1 correction scroll value
Move the first element to the end
var nown=arg.children (n);
Nown.eq (nown.length-1). After (Nown.eq (0));
After the first position is vacated, it needs to be returned by rewinding.
Arg.scrolltop (-h);
};
},vlimit);
};
An object in the Var fnrollarr=function (ARG) {//array starts scrolling individually
var out=setinterval (function () {
Fnrollfirst (Arg.shift ());
if (!arg.length) {
Clearinterval (out);
};
},RT);
};
var fnroll=function () {//Get a collection of objects that need scrolling individually
var arr=new Array ();
E.children (O). each (function () {
var rn=$ (this). Children (n);
if (rn.length>1) {
Arr.push ($ (this));
};
});
SetInterval (function () {
Fnrollarr (Arr.slice (0));
},T);
};
var fnlay=function () {//Layout page
H=en.height ();
var nu=math.ceil (en.length/l);
var u=$ ("<" +o+ "></" +o+ ">");
U.css ({"Overflow": "Hidden", "height": h+ "px", "Margin-bottom": "15px"});
for (Var i=0;i<l;i++) {
En.slice (nu*i,nu* (i+1)). Wrapall (U);
};
};
var fnmain=function () {//scrolling Main method
if (maxrnum>1) {
Fnlay ();
Maxrh=math.ceil (H/maxrnum);
Fnroll ();
};
};
var fnstart= function (ARG) {//init display mode
E=arg;
En = E.children (n);
En.show ();
if (en.length>l) {
Fnmain ();
}else{
return false;
};
};
return {
Setline:function (num) {//Set how many rows to scroll
(!isnan (num) && num>0) L=num: "";
return this;
},
Settime:function (num) {//scrolling interval: ms
(!isnan (num) && num>0) T=num: "";
return this;
},
Startroll:function () {//Start scrolling
Fnstart (this);
}
};
}
) (JQuery));

2. The page can be like this

Copy Code code as follows:

<div id= "Re" class= "dynamic" >
<li>
<a href= "#" class= "name" > Plum </a> is applying to become an experienced talent
</li>
<li>
<a href= "#" class= "name" > Plum </a> has been to the workplace theme "<a href=" "> I am an Asia-Pacific people, Asia-Pacific man </a>" contribution
</li>
<li>
<a href= "#" class= "name" > Dongchuan </a> has successfully purchased the workplace theme "<a href=" # "> I'm an Asia Pacific man </a>"
</li>
<li>
<a href= "#" class= "name" > Plum </a> to "<a href=" "> I am an Asia-Pacific people and Asia-Pacific people </a>" solution sold once again
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>

<li>
<a href= "#" class= "name" > Plum </a> to the workplace theme "<a href=" # "> I'm an Asia Pacific man." Asia-Pacific People </a> "contribution has passed the audit, won 1 Yuan reward.
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> comment experience:
<div class= "text" ><a href= "" > Life sentiment and work skills life perception and work </a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>

<li>
<a href= "#" class= "name" > Plum </a> has officially become an experienced talent
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> comment experience:
<div class= "text" ><a href= "" > Life sentiment and work skills life perception and work </a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>

<li>
<a href= "#" class= "name" > Plum </a> invited <a href= "#" class= "name" > Dongchuan </a> become an experienced talent
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> comment experience:
<div class= "text" ><a href= "" > Life sentiment and work skills life perception and work </a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
<li>
<a href= "#" class= "name" > three Nerio </a> answered <a href= "#" class= "name" > Fly </a> questions
<div class= "text" ><a href= "" > Life perception and work skill life sentiment?</a></div>
</li>
</div>
<script type= "Text/javascript" >
Invocation of complex points
$ ("#re"). Setline (5). SetTime (3000). Startroll ();
Simple call to
$ ("#re"). Startroll ();
</script>

I hope this article will help you with your jquery programming.