jquery.marquee.js/跑马灯/图片滚动
软源LOGO
讲述咱程序员自己的故事

位置:软源 »源码 »文章

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

coolapp;2012-10-17 02:56:22;浏览:4794
/*
  coolapp@163.com,www.mycoolapp.net
  对象需要先固定大小,左右滚动需要固定宽度,上下滚动需要固定高度
  左右滚动如果内容为流体则需要CSS禁止换行
  
  $('#mar001').marquee({leftCtrl:$('#ctrl_l'),rightCtrl:$('#ctrl_r'),direction:'left'});
*/
(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下载

分享到:
(转载→)