作爲一個JavaScript類方法的jquery方法

是否有可能在jQuery類中插入jquery函數？例如我有以下JS類：作爲一個JavaScript類方法的jquery方法

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

來源

2012-05-07 linuxatico

你試過了嗎？你是否收到任何錯誤或意外的行爲？是的，你可以在JavaScript構造函數或原型中包含jQuery。 – apsillers

我不明白你的問題，jQuery是Javascript代碼。你能確定它嗎？您想做什麼？你究竟在做什麼？你試過了什麼？你會得到什麼錯誤？順便說一下，Javascript中沒有「class」 – pomeh

@pomeh對不起，不清楚。我想移動2個圖像，像這樣：http://jsfiddle.net/linuxatico/XnPjL/ 但我想重新組織我的代碼，以便我可以快速分配不同的延遲和持續時間 – linuxatico

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-ish方法可以構建一個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-07 16:00:33

謝謝你的時間，但他們都不適合我，我想念什麼？ – linuxatico

它的工作原理是http://jsfiddle.net/XnPjL/2/ –

我的錯，我忘了rand的實現:) 非常感謝你 – linuxatico

是的。 jQuery IS JavaScript沒有區別。

但是你的「班級」將不再是便攜式的。它假定當你使用這個「class」時，你已經加載了jQuery，並且你傳遞的對象是jQuery對象，因爲你使用了delay和animate。

來源

2012-05-07 15:09:21 Joseph

作爲一個JavaScript類方法的jquery方法

回答

相關問題