jquery实现向左或向上多行滚动

　2012-10-12 11:24:10　来源：WEB开发网　　　

核心提示： gundong-0.1.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

gundong-0.1.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现向左或向上多行滚动 - 68q.cn</title>
<style type="text/css">
ul,li{margin:0;padding:0}
img{border:0px;}

a{text-decoration:none;border:0px;}

/* 横向滚动 */
#scrollDiv2{border:#ccc 1px solid;}
#scrollDiv3{border:#ccc 1px solid;}



</style>
<script src="../jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="wordscroll-0.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	
		$.wordScroll({
					 objId:"scrollDiv2"
					 });
		$.wordScroll({
					 objId:"scrollDiv3",
					 isHorizontal:true
					 });
});

</script>
</head>

<body>
<div id="scrollDiv2">
  <ul>
    <li>这是公告标题的第一行</li>
    <li>这是公告标题的第二行</li>
    <li>这是公告标题的第三行</li>
    <li>这是公告标题的第四行</li>
    <li>这是公告标题的第五行</li>
    <li>这是公告标题的第六行</li>
    <li>这是公告标题的第七行</li>
    <li>这是公告标题的第八行</li>
    <li>这是公告标题的第九行</li>
  </ul>
</div>
<div id="scrollDiv3">
  <ul>
    <li>这是公告标题的第一行</li>
    <li>这是公告标题的第二行</li>
    <li>这是公告标题的第三行</li>
    <li>这是公告标题的第四行</li>
    <li>这是公告标题的第五行</li>
    <li>这是公告标题的第六行</li>
    <li>这是公告标题的第七行</li>
    <li>这是公告标题的第八行</li>
    <li>这是公告标题的第九行</li>
  </ul>
</div>
	
</body>
</html>

wordscroll-0.1.js

/**
* 多行文字滚动，可以实现向左和向上两种滚动
* 
**/
$.extend({
        wordScroll:function(opt,callback){
			//alert("suc");
				this.defaults = {
					objId:"",
					width:300,  // 每行的宽度
					height:100, // div的高度
					liHeight:25,  // 每行高度
					line:2,  // 每次滚动的行数
					speed:1000,  // 动作时间
					interval:2000,  // 滚动间隔
					picTimer:0,  // 间隔句柄，不需要设置，只是作为标识使用
					isHorizontal:false  // 是否横向滚动
				}
				
                //参数初始化
				var opts = $.extend(this.defaults,opt);
				
				// 纵向横向通用
				$("#"+opts.objId).css({
									  width:opts.width,
									  height:opts.height,
									  "min-height":opts.liHeight,
									  "line-height":opts.liHeight+"px",
									  overflow:"hidden"
									  });
				
				$("#"+opts.objId+" li").css({
									  height:opts.liHeight
									  });
                if(opts.line==0) 
					opts.line=1;

				// 横向滚动
				if(opts.isHorizontal){
					// 横向使用，不够一屏则不滚动
					if($("#"+opts.objId).find("li").size()<=opts.line)
						return;
					var scrollWidth = 0 - opts.line*opts.width;
					
					$("#"+opts.objId).css({
										  width:opts.width*opts.line + "px",
										  });
					
					$("#"+opts.objId+" li").css({
										  "display":"block",
										  "float":"left",
										  "width":opts.width + "px"
										  });
					
					$("#"+opts.objId+" ul").css({
										  width:$("#"+opts.objId).find("li").size()*opts.width + "px"
					});
					
				}else{
				
					//如果不够一屏内容 则不滚动
					if($("#"+opts.objId).find("li").size()<=parseInt($("#"+opts.objId).height()/opts.liHeight,10))
						return;
					var upHeight=0-opts.line*opts.liHeight;
				}
				
				
				// 横向滚动
				function scrollLeft(){
						$("#"+opts.objId).find("ul:first").animate({
								marginLeft:scrollWidth
						},opts.speed,function(){
								for(i=1;i<=opts.line;i++){
									$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first"));
								}
								$("#"+opts.objId).find("ul:first").css({marginLeft:0});
						});
				};
				// 纵向滚动
				function scrollUp(){
						$("#"+opts.objId).find("ul:first").animate({
								marginTop:upHeight
						},opts.speed,function(){
								for(i=1;i<=opts.line;i++){
										$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first"));
								}
								$("#"+opts.objId).find("ul:first").css({marginTop:0});
						});
				};
				
				//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
				$("#"+opts.objId).hover(function() {
					clearInterval(opts.picTimer);
				},function() {
					opts.picTimer = setInterval(function() {
						// 判断执行横向或纵向滚动
						if(opts.isHorizontal)
							scrollLeft();
						else
							scrollUp();
					},opts.interval); // 自动播放的间隔，单位：毫秒
				}).trigger("mouseleave");
				}        
})