jquery实现多行滚动代码，可以向左或向上滚动
html 文件
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循环新闻列表代码</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>
js文件
wordscroll-0.1.js
/*** 多行文字滚动，可以实现向左和向上两种滚动* **/$.extend({ wordScroll:function(opt,callback){ //alert("suc"); this.defaults = { objId:"", width:300, // 每行的宽度 height:100, // div的高度 liHeight:25, // 每行高度 lines: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.lines==0) opts.lines=1; // 横向滚动 if(opts.isHorizontal){ $("#"+opts.objId).css({ width:opts.width*opts.lines + "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" });
// 横向使用，不够一屏则不滚动 if($("#"+opts.objId).find("li").size()<=opts.lines) return; var scrollWidth = 0 - opts.lines*opts.width; }else{ //如果不够一屏内容 则不滚动 if($("#"+opts.objId).find("li").size()<=parseInt($("#"+opts.objId).height()/opts.liHeight,10)) return; var upHeight=0-opts.lines*opts.liHeight; } // 横向滚动 function scrollLeft(){ $("#"+opts.objId).find("ul:first").animate({ marginLeft:scrollWidth },opts.speed,function(){ for(i=1;i<=opts.lines;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.lines;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"); } })