Jquery implements the method of tumble display of page blinds.

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.