一、单行滚动
<!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" c /> <title>无标题文档</title> <mce:style type="text/css"><!-- ul,li{margin:0;padding:0} #scrolldiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrolldiv li{height:25px;padding-left:10px;} --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- ul,li{margin:0;padding:0} #scrolldiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrolldiv li{height:25px;padding-left:10px;} --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0} #scrolldiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrolldiv li{height:25px;padding-left:10px;}</style> <mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- function autoscroll(obj){ $(obj).find("ul:first").animate({ margintop:"-25px" },500,function(){ $(this).css({margintop:"0px"}).find("li:first").appendto(this); }); } $(document).ready(function(){ setinterval('autoscroll("#scrolldiv")',1000) }); // --></mce:script> </head> <body> <div id="scrolldiv"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> </body> </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=gb2312" /> <title>无标题文档</title> <mce:style type="text/css"><!-- ul,li{margin:0;padding:0} #scrolldiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrolldiv li{height:25px;padding-left:10px;} --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- ul,li{margin:0;padding:0} #scrolldiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrolldiv li{height:25px;padding-left:10px;} --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0} #scrolldiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrolldiv li{height:25px;padding-left:10px;}</style> <mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- //滚动插件 (function($){ $.fn.extend({ scroll:function(opt,callback){ //参数初始化 if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineh=_this.find("li:first").height(), //获取行高 line=opt.line?parseint(opt.line,10):parseint(this.height()/lineh,10), //每次滚动的行数，默认为一屏，即父容器高度 speed=opt.speed?parseint(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒） timer=opt.timer?parseint(opt.timer,10):3000; //滚动的时间间隔（毫秒） if(line==0) line=1; var upheight=0-line*lineh; //滚动函数 scrollup=function(){ _this.animate({ margintop:upheight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendto(_this); } _this.css({margintop:0}); }); } //鼠标事件绑定 _this.hover(function(){ clearinterval(timerid); },function(){ timerid=setinterval("scrollup()",timer); }).mouseout(); } }) })(jquery); $(document).ready(function(){ $("#scrolldiv").scroll({line:4,speed:500,timer:1000}); }); // --></mce:script> </head> <body> <p>多行滚动演示：</p> <div id="scrolldiv"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> </body> </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=gb2312" /> <title>无标题文档</title> <mce:style type="text/css"><!-- ul,li{margin:0;padding:0} #scrolldiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrolldiv li{height:25px;padding-left:10px;} --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- ul,li{margin:0;padding:0} #scrolldiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrolldiv li{height:25px;padding-left:10px;} --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0} #scrolldiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrolldiv li{height:25px;padding-left:10px;}</style> <mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- (function($){ $.fn.extend({ scroll:function(opt,callback){ //参数初始化 if(!opt) var opt={}; var _btnup = $("#"+ opt.up);//shawphy:向上按钮 var _btndown = $("#"+ opt.down);//shawphy:向下按钮 var timerid; var _this=this.eq(0).find("ul:first"); var lineh=_this.find("li:first").height(), //获取行高 line=opt.line?parseint(opt.line,10):parseint(this.height()/lineh,10), //每次滚动的行数，默认为一屏，即父容器高度 speed=opt.speed?parseint(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒） timer=opt.timer //?parseint(opt.timer,10):3000; //滚动的时间间隔（毫秒） if(line==0) line=1; var upheight=0-line*lineh; //滚动函数 var scrollup=function(){ _btnup.unbind("click",scrollup); //shawphy:取消向上按钮的函数绑定 _this.animate({ margintop:upheight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendto(_this); } _this.css({margintop:0}); _btnup.bind("click",scrollup); //shawphy:绑定向上按钮的点击事件 }); } //shawphy:向下翻页函数 var scrolldown=function(){ _btndown.unbind("click",scrolldown); for(i=1;i<=line;i++){ _this.find("li:last").show().prependto(_this); } _this.css({margintop:upheight}); _this.animate({ margintop:0 },speed,function(){ _btndown.bind("click",scrolldown); }); } //shawphy:自动播放 var autoplay = function(){ if(timer)timerid = window.setinterval(scrollup,timer); }; var autostop = function(){ if(timer)window.clearinterval(timerid); }; //鼠标事件绑定 _this.hover(autostop,autoplay).mouseout(); _btnup.css("cursor","pointer").click( scrollup ).hover(autostop,autoplay);//shawphy:向上向下鼠标事件绑定 _btndown.css("cursor","pointer").click( scrolldown ).hover(autostop,autoplay); } }) })(jquery); $(document).ready(function(){ $("#scrolldiv").scroll({line:4,speed:500,timer:1000,up:"btn1",down:"btn2"}); }); // --></mce:script> </head> <body> <p>多行滚动演示：</p> <div id="scrolldiv"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> <span id="btn1">向前</span> <span id="btn2">向后</span> </body> </html>