jquery.marquee.js/跑马灯/图片滚动

2012-10-17  金城  5054


(function($){
 $.fn.marquee = function(o){
   var opts = $.extend({},$.fn.marquee.defaults,o);

   return this.each(function(){
     var $me=$(this);
     var oS=$me.html();
     var width=$me.width();
     var height=$me.height();
     $me.css('position','relative');
     var hdl,Amount=opts.scrollAmount;
     var $mar;
     if(opts.direction=='left'||opts.direction=='right'){
       $mar=$('<table style="position:relative;left:0;"border="0"cellspacing="0"cellpadding="0"><tr><td align="center"style="word-break:keep-all;white-space:nowrap;word-wrap:normal;">'+oS+'</td><td style="word-break:keep-all;white-space:nowrap;word-wrap:normal;">'+oS+'</td></tr></table>');
     }else{
       $mar=$('<table style="position:relative;top:0;"border="0"cellspacing="0"cellpadding="0"><tr><td align="center"style="word-break:keep-all;white-space:nowrap;word-wrap:normal;">'+oS+'</td></tr><tr><td style="word-break:keep-all;white-space:nowrap;word-wrap:normal;">'+oS+'</td></tr></table>');
     }
     $me.html($mar);
      
     function _left(){
       var left=parseInt($mar.css('left'));
       left -=Amount;
       if(left<-width)left=0;
       $mar.css('left',left+'px');
     };
     function _right(){
       var left=parseInt($mar.css('left'));
       left +=Amount;
       if(left>0)left=-width;
       $mar.css('left',left+'px');
     };
     function _up(){
       var top=parseInt($mar.css('top'));
       top -=Amount;
       if(top<-height)top=0;
       $mar.css('top',top+'px');
     };
     function _down(){
       var top=parseInt($mar.css('top'));
       top +=Amount;
       if(top>0)top=-height;
       $mar.css('top',top+'px');
     };
     function _play(){
       if(opts.direction=='left')hdl=setInterval(_left,opts.scrollDelay);
       else if(opts.direction=='right')hdl=setInterval(_right,opts.scrollDelay);
       else if(opts.direction=='up')hdl=setInterval(_up,opts.scrollDelay);
       else if(opts.direction=='down')hdl=setInterval(_down,opts.scrollDelay);
     };
     function _set_direction(d){
       clearInterval(hdl);
       opts.direction=d;
       _play();
     };
      
     $me.hover(function(){
       clearInterval(hdl);
     },_play);
      
     if(opts.leftCtrl)
       opts.leftCtrl.mousedown(function(){Amount=opts.newAmount;}).mouseup(function(){Amount=opts.scrollAmount;}).mouseover(function(){_set_direction('left')});
     if(opts.rightCtrl)
       opts.rightCtrl.mousedown(function(){Amount=opts.newAmount;}).mouseup(function(){Amount=opts.scrollAmount;}).mouseover(function(){_set_direction('right')});
     if(opts.upCtrl)
       opts.upCtrl.mousedown(function(){Amount=opts.newAmount;}).mouseup(function(){Amount=opts.scrollAmount;}).mouseover(function(){_set_direction('up')});
     if(opts.downCtrl)
       opts.downCtrl.mousedown(function(){Amount=opts.newAmount;}).mouseup(function(){Amount=opts.scrollAmount;}).mouseover(function(){_set_direction('down')});

     _play();
   });
 };
 $.fn.marquee.defaults={
   direction:'left',
   scrollAmount:1,
   scrollDelay:100,
   newAmount:10,
   leftCtrl:null,
   rightCtrl:null,
   upCtrl:null,
   downCtrl:null
 }
 $.fn.marquee.setDefaults=function(settings){
   $.extend( $.fn.marquee.defaults,settings);
 };
})(jQuery);

jquery.marquee.js下载