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

Source: Internet
Author: User
Tags setinterval

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.

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.