·您当前的位置:主页 > 技术教程 > jQuery教程 >

[JQuery]文字滚动文字跑马灯效果插件代码

时间:2017-07-12 11:45酷播
[JQuery]文字滚动文字跑马灯效果插件代码

[JQuery]文字滚动文字跑马灯效果插件代码

  1. /** 
  2.  * 文字滚动 
  3.  * lee 
  4.  */ 
  5. (function($){ 
  6.     $.fn.extend({ 
  7.         Scroll:function(opt,callback){ 
  8.             if(!opt) var opt={}; 
  9.             var _this=this.eq(0).find("ul:first"); 
  10.             var        lineH=_this.find("li:first").height(), 
  11.             line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), 
  12.             speed=opt.speed?parseInt(opt.speed,10):500, 
  13.             timer=opt.timer?parseInt(opt.timer,10):3000; 
  14.             if(line==0) line=1
  15.             var upHeight=0-line*lineH; 
  16.             scrollUp=function(){ 
  17.                 _this.animate({ 
  18.                     marginTop:upHeight 
  19.                 },speed,function(){ 
  20.                     for(i=1;i<=line;i++){ 
  21.                         _this.find("li:first").appendTo(_this); 
  22.                     } 
  23.                     _this.css({marginTop:0}); 
  24.                 }); 
  25.             } 
  26.             _this.hover(function(){ 
  27.                 clearInterval(timerID); 
  28.             },function(){ 
  29.                 timerID=setInterval("scrollUp()",timer); 
  30.             }).mouseout(); 
  31.         }        
  32.     }) 
  33. })(jQuery); 

使用时:

  1. <script type="text/javascript">  
  2.     $(document).ready(function(){ 
  3.         $("#news").Scroll({line:1,speed:500,timer:3000}); 
  4.     }); 
  5. </script>  

 

微信付费直播
酷播云免费在线视频整体解决方案
参与开学季云视频优惠,拿GET2017教育科技大会VIP门票
进入开学季,保利威视推出云视频优惠,云视频套餐、流量超实惠大放“价”就是现在,还可以免费获取GET2017教育科技大会VIP门票哦!