Jquery实现滚动效果（修改版）

小鹏爷

浏览: 8689 次
性别:
来自: 杭州

最近访客更多访客>>

asadavas

叶落啼莺

ymgjava

ffychina

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery日常笔记

在页面中，当我们ul中li的数量过多时，我们需要利用滚动效果将内容在一个特定大小的滚动显示出来。在网络上有一个实现滚动效果的代码。

(function($){  
    var status = false;  
    $.fn.scrollQ = function(options){  
        var defaults = {  
        	//div中显示的条数
            line:4,     
            //每次滚动的条数
            scrollNum:1, 
            scrollTime:1000
        }
		var options=jQuery.extend(defaults,options);
		var _self = this;
		return this.each(function(){

                        //这里就是修改的部分-------------------
			//当ul中li的条数少于显示的条数（line）时,就不进行滚动，否则li就会在滚动后消失。
			temp = document.getElementById('sItem');
			lis = temp.getElementsByTagName('li');
			if(lis.length<defaults.line){
				// alert(lis.length); //显示li元素的个数
				return;
			}
			//直到这里---------------------------
			$("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");
					})
				}
			}
			var timer;
			timer = setInterval(scroll,options.scrollTime);
			_self.bind("mouseover",function(){
				clearInterval(timer);
			});
			_self.bind("mouseout",function(){
				timer = setInterval(scroll,options.scrollTime);
			});
			
		});
    }
})(jQuery);

方法中line代表的便是在每次显示li的条数，当我们内容所包含的li数量小于line时，js会把下面空的li循环滚动到上一层，导致在循环过后所有的li都为空，所以我在这里加上一个判断，当我们内容所包含的li长度小于line时便不进行滚动，因为所有的内容都已显示。

下面是html代码

<!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>标题1</li>
     <li>标题2</li>
   <li>标题3</li>
  <li>标题4</li>
   <li>标题5</li>
    <li>标题6</li>
    <li>标题7</li>
    <li>标题8</li>
    <li>标题9</li>
    <li>标题10</li>
    </ul>
    </div>
</body>
</html>

分享到：