0

javascriptクラスにjquery関数を挿入することは可能ですか？たとえば、次のJSクラスがあります。

function FloatingImage() {
    var delay, duration;

    var moveRight = function($image)
    {

        $image.delay(delay).animate(
        { 
            left: $image.parent().width() - $image.width()
        }, 
        {
            duration: duration,
            complete: function(){ moveLeft($image) }
        });
    },
    moveLeft = function($image){
        $image.delay(delay).animate({
            left: 0
        }, {
            duration: duration,
            complete: function(){ moveRight($image) }
        });
    };

    this.constructor = function (delay, duration) {

        this.delay = delay;
        this.duration = duration;
    };
}

次のサポート機能：

function rand(l,u) // lower bound and upper bound
 {
     return Math.floor((Math.random() * (u-l+1))+l);
 }

次に、2つのdiv #imgleftと#imgrightがあり、両方の2つの画像を背景として、次のように呼び出します。

$(function(){
    var $imageL = $('#imgleft'),
        $imageR = $('#imgright');

    var fi1 = new FloatingImage();
        fi1.constructor(rand(400,600), rand(1500,3000));
    var fi2 = new FloatingImage();
        fi2.constructor(rand(400,600), rand(1500,3000));

    fi1.moveRight($imageL);
    fi2.moveLeft($imageR);
});
4

2 に答える 2

1

はい。jQueryはJavaScriptであり、違いはありません。

しかし、あなたの「クラス」はもう移植できなくなります。delayその「クラス」を使用すると、jQueryがロードされ、渡されるオブジェクトは、およびを使用してからjQueryオブジェクトであると想定されますanimate。

于 2012-05-07T15:09:21.827 に答える
1

関数自体はコンストラクターであるため、およびパラメーターFloatingImageを受け取るものである必要があります。このコンストラクターによってビルドされたオブジェクトインスタンスのメソッドとして使用可能であり、関数をオブジェクトにアタッチする必要があります。そうしないと、コンストラクターのスコープ外でアクセスできなくなります。最後に、完全なコールバックでは、オブジェクトのメソッドを呼び出す必要があります。delayduration

function FloatingImage(delay, duration) {
  var self = this;
  this.moveRight = function($image) {
    $image.delay(delay).animate({ 
      left: $image.parent().width() - $image.width()
    },{
      duration: duration,
      complete: function(){ self.moveLeft($image) }
    });
  },
  this.moveLeft = function($image){
    $image.delay(delay).animate({
      left: 0
    },{
       duration: duration,
       complete: function(){ self.moveRight($image) }
    });
  };
}

しかし、これはあまり良いOOパターンではないようです。それを行うためのより良いjQuery風の方法は、jQueryプラグインを構築することです。

$.fn.floatingImage = function(options) {
  var settings = $.extend( {
    direction: 'left',
    delay    : 400,
    duration : 400
  }, options);
  var self = this;
  self.delay(settings.delay).animate({
    left: (settings.direction === 'left') ? 0 : (this.parent().width() - this.width()),
  }, {
    duration: settings.duration,
    complete: function() {
      self.floatingImage({
        direction: (settings.direction === 'left') ? 'right' : 'left',
        delay: settings.delay,
        duration: settings.duration
      });
    }
  });
  // Return the jQuery object to allow methods chaining. 
  return self;
}    

$(function(){
  $('#imgleft').floatingImage({delay: rand(400,600), duration: rand(1500,3000)});
  $('#imgright').floatingImage({delay: rand(400,600), duration: rand(1500,3000), direction: 'right'});
});
于 2012-05-07T16:00:33.580 に答える