In the page, when the number of li in our ul is too much, we need to use the scroll effect to display the content in a specific size scroll. There is a code on the web that implements the scrolling effect.
(function($){
var status = false;
$.fn.scrollQ = function(options){
var defaults = {
//The number of bars displayed in the div
line:4,
//Number of bars per scroll
scrollNum:1,
scrollTime:1000
}
var options=jQuery.extend(defaults,options);
var _self = this;
return this.each(function(){
//here is the modified part-------------------
//When the number of li in ul is less than the number of displayed lines (line), no scrolling is performed, otherwise li will disappear after scrolling.
temp = document.getElementById('sItem');
lis = temp.getElementsByTagName('li');
if(lis.length<defaults.line){
// alert(lis.length); //Display the number of li elements
return;
}
//until here -----------------------
$("li",this).each(function(){
$(this).css("display","none");
})
$("li:lt("+options.line+")",this).each(function(){
$(this).css("display","block");
})
function scroll() {
for(i=0;i<options.scrollNum;i++) {
var start=$("li:first",_self);
start.fadeOut(100);
start.css("display","none");
start.appendTo(_self);
$("li:eq("+(options.line-1)+")",_self).each(function(){
$(this).fadeIn(500);
$(this).css("display","block");
})
}
}
were hours;
timer = setInterval(scroll,options.scrollTime);
_self.bind("mouseover",function(){
clearInterval(timer);
});
_self.bind("mouseout",function(){
timer = setInterval(scroll,options.scrollTime);
});
});
}
})(jQuery);
The line in the method represents the number of li displayed each time. When the number of li contained in our content is less than the line, js will scroll the empty li below to the previous layer, resulting in all li after the loop. It is empty, so I add a judgment here. When the li length contained in our content is less than the line, we will not scroll, because all the content has been displayed.
Below is the html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>test</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="scrollQ.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sItem").scrollQ();
});
</script>
</head>
<body>
<div>
<ul id="sItem">
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
<li>Title 5</li>
<li>Title 6</li>
<li>Title 7</li>
<li>Title 8</li>
<li>Title 9</li>
<li>Title 10</li>
</ul>
</div>
</body>
</html>