今兒分享一個(gè)jquery實(shí)現(xiàn)多行滾動(dòng)效果。
我看一些論壇網(wǎng)站上面,公告處用的較多。
代碼如下
// 多行滾動(dòng)(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, //卷動(dòng)速度,數(shù)值越大,速度越慢(毫秒)timer=opt.timer?parseInt(opt.timer,10):5000; //滾動(dòng)的時(shí)間間隔(毫秒)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多行滾動(dòng)條一</li><li>我是jquery多行滾動(dòng)條二</li><li>我是jquery多行滾動(dòng)條三</li><li>我是jquery多行滾動(dòng)條四</li><li>我是jquery多行滾動(dòng)條五</li><li>我是jquery多行滾動(dòng)條六</li><li>我是jquery多行滾動(dòng)條七</li><li>我是jquery多行滾動(dòng)條八</li></ul></div>
<script type="text/javascript" src="http:/(www.companysz.com)/ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">// 多行滾動(dòng)(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, //卷動(dòng)速度,數(shù)值越大,速度越慢(毫秒)timer=opt.timer?parseInt(opt.timer,10):5000; //滾動(dòng)的時(shí)間間隔(毫秒)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>
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注