Jquery implements the method of tumble display of page blinds.

Jquery implements the method of tumble display of page blinds.

This article describes how jquery achieves the tumble display of page blinds. Share it with you for your reference. The details are as follows:

1. The code here requires support from jquery1.3 and above, as shown below:
Copy codeThe Code is as follows: jQuery. fn. extend ((
Function ($ ){
Var l = 4, // Number of rolling rows
T = 5000, // The interval after the rolling starts the next time
Rt = 500, // the time consumed by each n-volume previous operations
N = "li", // The HTML tag to be rolled in the default volume object
O = "ul", // The HTML tag of the wrapped volume element that is enabled when the scroll is enabled
E, // call object
En, // call all the sets of objects to be rolled
H; // scroll Row Height
Var vLimit = 80; // smaller than the visual limit of 0.1s
Var maxRnum = Math. ceil (rt/vLimit); // maximum number of scrolling times
Var maxRh = 0; // The height of each scroll
Var fnRollFirst = function (arg) {// roll arg to 1 n, and then 1st n to the last position.
Var rCount = 0; // record of the number of rolling operations
Var rVal = setInterval (function () {// loops every vLimit, maxRnum-1 times in total
RCount ++;
Arg. scrollTop (arg. scrollTop () + maxRh );
If (rCount> = (maxRnum-1) {// small volume 1 time
ClearInterval (rVal );
Arg. scrollTop (arg. scrollTop () + h-maxRh * (maxRnum-1); // The Last modified volume 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 left blank, it must be corrected by inverted volume.
Arg. scrollTop (-h );
};
}, VLimit );
};
Var fnRollArr = function (arg) {// one-by-one volume of objects in the array
Var out = setInterval (function (){
FnRollFirst (arg. shift ());
If (! Arg. length ){
ClearInterval (out );
};
}, Rt );
};
Var fnRoll = function () {// obtain the set of objects to be rolled one by one
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 () {// method of rolling master
If (maxRnum> 1 ){
FnLay ();
MaxRh = Math. ceil (h/maxRnum );
FnRoll ();
};
};
Var fnStart = function (arg) {// initialize the Display Mode
E = arg;
En = e. children (n );
En. show ();
If (en. length> l ){
FnMain ();
} Else {
Return false;
};
};
Return {
SetLine: function (num) {// you can specify the number of rows to be merged.
(! IsNaN (num) & num> 0 )? L = num :"";
Return this;
},
SetTime: function (num) {// rolling interval: millisecond
(! IsNaN (num) & num> 0 )? T = num :"";
Return this;
},
StartRoll: function () {// start the volume
FnStart (this );
}
};
}
) (JQuery ));
2. The page can be like this
Copy codeThe Code is as follows: <div id = "re" class = "dynamic">
<Li>
<A href = "#" class = "name"> Li Fei </a> is applying to become an experienced expert.
</Li>
<Li>
<A href = "#" class = "name"> Li Fei </a> has delivered the <a href = ""> I am a person from Asia Pacific and Asia Pacific </a> topic to the workplace. contribution
</Li>
<Li>
<A href = "#" class = "name"> Dong chuanmin </a> I have successfully purchased the workplace topic <a href = "#"> I am a person from Asia Pacific and Asia Pacific </a>
</Li>
<Li>
<A href = "#" class = "name"> Li Fei </a> solution to <a href = ""> I am a person from Asia Pacific and Asia Pacific </a> the solution is sold again
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>

<Li>
<A href = "#" class = "name"> Li Fei </a> to the workplace topic <a href = "#"> I am a person from Asia and Pacific </a> the submission has been approved, 1 yuan reward.
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> comments:
<Div class = "text"> <a href = ""> life perception and handling skills: Life Perception and handling </a> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>

<Li>
<A href = "#" class = "name"> Li Fei </a> has become an experienced expert.
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> comments:
<Div class = "text"> <a href = ""> life perception and handling skills: Life Perception and handling </a> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>

<Li>
<A href = "#" class = "name"> Li Fei </a> has invited <a href = "#" class = "name"> Dong chuanmin </a> experienced Talents
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> comments:
<Div class = "text"> <a href = ""> life perception and handling skills: Life Perception and handling </a> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
<Li>
<A href = "#" class = "name"> sannerio </a> replied to <a href = "#" class = "name"> dafei </a> question
<Div class = "text"> <a href = ""> what about life perception and skills? </A> </div>
</Li>
</Div>
<Script type = "text/javascript">
// CALL statement for complex points
/// $ ("# Re"). setLine (5). setTime (3000). startRoll ();
// Simple call
$ ("# Re"). startRoll ();
</Script>

I hope this article will help you with jQuery programming.