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 复制代码代码如下: <P>/** * 多行文字滚动，可以实现向左和向上两种滚动 * **/ $.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" });</P><P> // 横向使用，不够一屏则不滚动 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"); } }) </P>

　　推荐阅读

　　file模式访问网页时iframe高度自适应解决方案

最近做到iframe的高度自适应这个问题，网上一搜好多解决方案，而总结起来也就那几种，我逐一尝试这些方案，最后发现在我的项目中都不起作用，后来发现自己做的网页是通过file方式访问的，将网页代码放到apache下通>>>详细阅读

本文标题：jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码

地址：http://www.17bianji.com/kaifa2/JS/22480.html

1/2 1