使用jQuery 1.3.x將圖像移動到DIV的位置

我有許多小圖像，顯示的是圖標的大小（32x32）。我想要將他們從頁面上的當前位置動畫到任何時候有人點擊任何圖像的DIV的x，y。使用jQuery做這件事的最佳途徑是什麼？使用jQuery 1.3.x將圖像移動到DIV的位置

2010-01-25 Keith Adler

如果我正確地理解了這個問題，那麼您可以將css屬性更改爲圖像的屬性。即在div內包含圖像並將div移動到點擊圖標的位置。

$("#divname").css({'width' : '32', 'height' : '32' , 'left' : 'IMAGELEFT', 'top' : 'IMAGETOP'});

假設我理解了這個問題。

編輯：

要將圖像移動到div：

$("#image").click(function(){ 
    $(".block").animate({'left': 'DIVPOSITION', 'top', 'DIVPOSITION'}, 'slow', function() { 
$("#div").html("<img src=\"THEIMAGE\">"); 
    }); 
); 
});

來源

2010-01-25 22:00:29 Gazler

對不起，我原來不是很清楚。我已經修改，以提高清晰度。我想使用動畫特性使它從圖標的位置移動到特定DIV的x，y。 – 2010-01-25 22:13:24

您想要將圖像移動到DIV內時是否正確？ – Gazler 2010-01-25 22:26:31

看起來已經有一些jquery plugins是你在找什麼。

從鏈接中，CJ Object Scaler應該能夠確保您的圖像符合指定的尺寸。 JQUERY IMAGE MAGNIFY通過圖像處理動畫和透明度。

來源

2010-01-25 22:04:25 smencer

對不起，我原來不是很清楚。我已經修改，以提高清晰度。我想使用動畫特性使它從圖標的位置移動到特定DIV的x，y。 – 2010-01-25 22:14:30

請參閱：http://api.jquery.com/animate/ 基本上，您將爲圖像分配一組CSS屬性，該屬性將成爲結束狀態，持續時間和回調函數。 CJ Object Scaler仍然可以幫助確保圖像適當地適合DIV。 – smencer 2010-01-25 22:28:44

好吧，從頭頂開始，您可以使用offset（）函數來獲取圖像和想要圖像移動到的div的x和y座標。 offset（）。left和offset（）。right。

然後我還認爲你需要確保圖像的位置絕對正確。然後，只需在圖像元素上使用animate（）函數，並在animate（）函數中添加新的x和y位置，以使圖像到達那裏。

轉到docs.jquery.com並閱讀animate（）函數需要的參數。

我會試着拿出代碼示例，如果你掙扎。

來源

2010-01-25 22:36:29

使用jQuery 1.3.x將圖像移動到DIV的位置

回答

相關問題