ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery マーキー シームレス スクロール プラグインの実装チュートリアル

jQuery マーキー シームレス スクロール プラグインの実装チュートリアル

小云云
小云云オリジナル
2018-01-22 17:38:491836ブラウズ

この記事では、jQuery をベースにしたマーキーのシームレスなスクロールを実装するプラグインを主に紹介します。これは非常に優れており、必要な方は参考にしていただければ幸いです。

jQueryをベースに、マーキーのシームレススクロールを実装するプラグインがgit.oschina.netにリリースされており、デモは後日更新予定です(http://git.oschina.net/mqycn/jQueryMarqueeに更新) 。

コードは次のとおりです:


/**
 * 类库名称:jQuery.marquee
 * 实现功能:基于 jquery 实现的 marquee 无缝滚动插件
 * 作者主页:http://www.miaoqiyuan.cn/
 * 联系邮箱:mqycn@126.com
 * 使用说明:http://www.miaoqiyuan.cn/p/jquery-marquee
 * 最新版本:http://git.oschina.net/mqycn/jQueryMarquee
*/
jQuery.fn.extend({
  marquee : function(opt, callback){
    opt = opt || {};
    opt.speed = opt.speed || 30;
    opt.direction = opt.direction || 'left';
    opt.pixels = opt.pixels || 2;
    switch( opt.direction ){
      case "left":
      case "right":
        opt.weight = "width";
        opt.margin = "margin-left";
        opt.tpl = &#39;<table><tr><td>[TABLE]</td><td>[TABLE]</td></tr></table>&#39;;
        break;
      case "top":
      case "bottom":
        opt.weight = "height";
        opt.margin = "margin-top";
        opt.tpl = &#39;<table><tr><td>[TABLE]</td></tr></tr><td>[TABLE]</td></tr></table>&#39;;
        break;
      default:
        throw Error("[jQuery.marquee.js] Options.direction Error!");
    }
    switch( opt.direction ){
      case "left":
      case "top":
        opt.addon = -1;
        break;
      case "right":
      case "bottom":
        opt.addon = 1;
        break;
      default:
        throw Error("[jQuery.marquee.js] Options.direction Error!");
    }
    callback = typeof callback == "function" ? callback : function(){};
    //设置宽度
    $(this).each(function(){
      if( this.control ){
        clearInterval(this.control);
      } else {
        //如果第一次执行,初始化代码
        $(this)
          .data(opt.weight, opt.weight == &#39;width&#39; ? $(this).find("table").width() : $(this).find("table").height())
          .width($(this).data(opt.weight) * 2)
          .html(opt.tpl.replace(/\[TABLE\]/ig, $(this).html()))
          .mouseover(function(){
            $(this).data("pause", true);
          }).mouseout(function(){
            $(this).data("pause", false);
          });
      }
      this.control = setInterval((function(){
        if( $(this).data("pause") ){
          return;
        }
        var _margin = parseInt($(this).css(opt.margin)) + opt.addon * opt.pixels;
        if( opt.addon == -1 && _margin + $(this).data(opt.weight) < 0 ){
          _margin = 0;
        }else if( opt.addon == 1, _margin > 0 ){
          console.log(_margin < 0,$(this).data(opt.weight));
          _margin = -1 * $(this).data(opt.weight);
        }
        $(this).css(opt.margin, _margin + "px");
        callback.bind(this)();
      }).bind(this), opt.speed);
    });
    return $(this);
  }
});

IE9 より下で使用する場合は、前に次のコードを追加する必要があります:


/**
 * IE8插件(解决 function 不支持 bind 的问题),非原创
*/
if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== "function") {
      throw new TypeError("[jQuery.marquee.ie8] Caller is not a function");
    }
    var aArgs = Array.prototype.slice.call(arguments, 1),
      fToBind = this,
      fNOP = function() {},
      fBound = function() {
        return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
      };
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
  };
}

3 つのオプションのパラメータとコールバック メソッドがあります。

方向、移動方向: 左: 左、右: 右、上: 上、下: 下をサポートします。

ピクセル、毎回移動するピクセル数

速度、2 つの移動間の間隔数 (ミリ秒)

次のようなメソッド:
$("scroll-a").marquee();
$("scroll-b").marquee({direction:&#39;top&#39;});
$("scroll-c").marquee({direction:&#39;top&#39;,pixels:2,speed:30});
$("scroll-d").marquee({direction:"top",pixels:2,speed:30}, function(){
  console.log("执行了一次");
});

関連の推奨事項:


wechatアプレットコンポーネントマーキーインスタンス共有マーキースクロール効果を実現するための詳細な例


以上がjQuery マーキー シームレス スクロール プラグインの実装チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。