jquery realizes the method of rolling display effect of page shutter
- 2020-05-12 02:13:01
- OfStack
The example of this paper describes the method of jquery to realize the rolling display effect of page shutter. Share with you for your reference. The details are as follows:
1. The code here requires support of jquery 1.3 and above, as shown below:
jQuery.fn.extend((
function($){
var l = 4,// Scroll the number of rows
t=5000,// Scroll through 1 After the first time, how often to start the next scroll
rt=500,// each n Scrolling past time
n="li",// The default scroll object contains the one to scroll HTML tag
o="ul",// If scroll, enable the wrap to scroll the element HTML tag
e,// Call object
en,// Calls all collections of objects within the object to scroll
h;// Scroll row height
var vLimit=80;// Specific visual limit 0.1s Is dot
var maxRnum=Math.ceil(rt/vLimit);// Maximum number of rolls
var maxRh=0;// Each time you scroll the height
var fnRollFirst=function(arg){// will arg Roll up 1 a n , will be finished after the first 1 a n Move to the end 1 A position
var rCount=0;// Record the number of rolls
var rVal=setInterval(function(){// every vLimit cycle 1 Second, total circulation maxRnum-1 time
rCount++;
arg.scrollTop(arg.scrollTop()+maxRh);
if(rCount>=(maxRnum-1)){// Less volume 1 time
clearInterval(rVal);
arg.scrollTop(arg.scrollTop()+h-maxRh*(maxRnum-1));// The last 1 Subcorrected scroll value
// Move the first 1 All the way to the end
var nowN=arg.children(n);
nowN.eq(nowN.length-1).after(nowN.eq(0));
// The first 1 After the position is vacated, it needs to be corrected by rewinding
arg.scrollTop(-h);
};
},vLimit);
};
var fnRollArr=function(arg){// The objects in the array are itemized 1 Start scrolling
var out=setInterval(function(){
fnRollFirst(arg.shift());
if(!arg.length){
clearInterval(out);
};
},rt);
};
var fnRoll=function(){// Gets the collection of objects to scroll 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(){// The 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(){// Scroll the main method
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){// Sets how many rows to scroll
(!isNaN(num) && num>0)?l=num:"";
return this;
},
setTime : function(num){// Time between rolls : ms
(!isNaN(num) && num>0)?t=num:"";
return this;
},
startRoll : function(){// Start scrolling
fnStart(this);
}
};
}
)(jQuery));2. The page can look like this
<div id="re" class="dynamic">
<li>
<a href="#" class="name"> Li Fei </a> Applying to be a master of experience
</li>
<li>
<a href="#" class="name"> Li Fei </a> Has been submitted to the <a href=""> I'm an asia-pacific person </a> Contribute"
</li>
<li>
<a href="#" class="name"> Dong Chuanmin </a> Have successfully purchased the workplace topic" <a href="#"> I'm an asia-pacific person </a> "
</li>
<li>
<a href="#" class="name"> Li Fei </a> For the <a href=""> I'm an asia-pacific person </a> "The solution sold again 1 time
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name"> Li Fei </a> Topics for the workplace" <a href="#"> I'm an asia-pacific person </a> "Has been reviewed and obtained 1 Yuan reward.
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> Review experience:
<div class="text"><a href=""> Life perception and handling affairs skills </a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name"> Li Fei </a> Has officially become a master of experience
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> Review experience:
<div class="text"><a href=""> Life perception and handling affairs skills </a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name"> Li Fei </a> Has invited <a href="#" class="name"> Dong Chuanmin </a> Become a master of experience
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> Review experience:
<div class="text"><a href=""> Life perception and handling affairs skills </a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
<li>
<a href="#" class="name">3 Inside the </a> To answer the <a href="#" class="name"> The big fly </a> The question of
<div class="text"><a href=""> Life lessons and skills life lessons ?</a></div>
</li>
</div>
<script type="text/javascript">
// Complex point of the call to write
//$("#re").setLine(5).setTime(3000).startRoll();
// Simple call
$("#re").startRoll();
</script>I hope this article is helpful for you to design jQuery program.