今兒分享一個jquery實現多行滾動效果。
我看一些論壇網站上面,公告處用的較多。
代碼如下
// 多行滾動(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):1000, //卷動速度,數值越大,速度越慢(毫秒)timer=opt.timer?parseInt(opt.timer,10):5000; //滾動的時間間隔(毫秒)if(line==0) line=1;var upHeight=0-line*lineH;scrollUp=function(){_this.animate({marginTop:upHeight},speed,function(){for(i=1;i
實例演示
代碼如下
<div id="scrollDiv"><ul><li>我是jquery多行滾動條一</li><li>我是jquery多行滾動條二</li><li>我是jquery多行滾動條三</li><li>我是jquery多行滾動條四</li><li>我是jquery多行滾動條五</li><li>我是jquery多行滾動條六</li><li>我是jquery多行滾動條七</li><li>我是jquery多行滾動條八</li></ul></div>
<script type="text/javascript" src="http:/(www.49028c.com)/ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><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):1000, //卷動速度,數值越大,速度越慢(毫秒)timer=opt.timer?parseInt(opt.timer,10):5000; //滾動的時間間隔(毫秒)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:1000,timer:2000});});</script>
新聞熱點
疑難解答