jquery方法作为javascript'；s类方法

可以在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);
 }

然后调用它，假设有两个div#imgleft和#imgright，两个图像都作为背景，其中：

$(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);
}); 

---

对。jQuery是JavaScript，没有区别

---

但是你的“类”将不再是可移植的。它假设当您使用该“类”时，您已经加载了jQuery，并且您传递的对象是jQuery对象，因为您使用了

delay

和

animate

，

FloatingImage

函数本身就是构造函数，因此它应该是接收

delay

和

duration

参数的函数。此构造函数生成的对象实例上的方法可能可用，您需要将函数附加到对象。否则，它们将无法在构造函数的范围之外访问。最后，在完整的回调中，您需要调用对象上的方法

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'});
});

---

你试过了吗？您是否有任何错误或意外行为？是的，您可以在JavaScript构造函数或原型中包含jQuery。我不理解您的问题，jQuery是JavaScript代码。你能精确吗？你想做什么？你到底在干什么？你试过什么？你会犯什么错误？顺便说一句，这里没有“类”Javascript@pomeh对不起，我不清楚。我想像这个示例一样移动两个图像：但我想重新组织代码，以便快速分配不同的延迟和时间duration@apsillers当然，我试过了，没有发现任何错误，动画也不起作用，所以我认为我做不到。对不起，我说的“你试过了吗？”并不是在侮辱你——我真的是在含蓄地问“…而且，当您尝试它时，结果与您预期的结果有什么不同？”正如我下面的问题一样，您刚刚回答。感谢您的时间，但这两个问题对我都不起作用，我错过了什么吗？我的错，我忘了rand实现：）非常感谢。我还有一个问题要问您：使用此配置（我的意思是使用”调整窗口大小会导致浏览器显示水平滚动条，如果我想避免这种行为，我该怎么办？我想在CSS和js文件中将“left”属性替换为“background position:”，但动画根本不起作用……有人有线索吗？