使用jQuery動畫將圖像調整爲原始尺寸

我想使用jQuery將圖像從200 x 300px變爲原始尺寸。使用jQuery動畫將圖像調整爲原始尺寸

我看到這樣的畫面：

var imgHtml = "<img id='bigImg' src='" + bigSrc + "' alt='' style=\"height:200px; width:300px\"/>"; 
$("#divId").html(imgHtml);

這jQuery代碼：

$("#bigImg").animate({ 
    height: "400px", 
    width: "600px", 
},500);

它運作良好，但我實際上是硬編碼的未來規模。我想動畫到原始大小。

我該怎麼做？

來源

2012-02-24 Pier-Alexandre Bouchard

試着這樣做

HTML

<div id="divId">Loading</div> 
<input id="submit" type="button" value=" Click Me " />

的JavaScript

var bigSrc = "Image Source"; 

var img = new Image(), 
    oWidth, oHeight; 

img.onload = function() { 
    oWidth = this.width; 
    oHeight = this.height; 
    this.width = 300; 
    this.height = 200; 
    this.id = "bigImg"; 
} 
img.src = bigSrc; 

$("#submit").click(function(e) { 
    $("#divId").append(img); 
    $("#bigImg").animate({ 
     height: oHeight, 
     width: oWidth, 
    }, 500); 
});

Check this demo jsFiddle

你可以調整，以適應你。希望這可以幫助你。

來源

2012-02-24 05:27:03

我在努力。所以你在開始時創建一個新的圖像？也許我可以用它來取代imgHtml？（看代碼更新）.. – 2012-02-24 05:42:59

好點...檢查[this]（http://jsfiddle.net/dAzyj/4/）jsFiddle。還更新了我的答案。讓我知道它是否工作。 – 2012-02-24 05:49:01

我在努力。我會告訴你它是否在幾秒鐘內工作 – 2012-02-24 05:54:24

好的，我明白你的意思了。

$("#bigImg").width()將返回px中的寬度，高度將做類似的操作。您也可以分別使用.outerWidth()和.innerWidth()來包含填充/邊框或僅填充。

從您的代碼中，您已經通過使用內聯樣式更改了圖像的原始尺寸。相反，保存圖像尺寸，圖像切換到200 x 300像素的jQuery的，你想它是什麼，然後改回原來的尺寸：

var originalWidth = $("#bigImg").width(); 
var originalHeight = $("#bigImg").height(); 

$("#bigImg").css({ 
    width: '200px', 
    height: '300px' 
}); 

//Do whatever you meant to do here, the when you're finished... 

$("#bigImg").animate({ 
    width: originalWidth, 
    height: originalHeight, 
},500);

jQuery的文檔：或http://api.jquery.com/category/dimensions/

來源

2012-02-24 05:22:57 iono

我編輯我的文章，我的圖像生成。看看我的代碼，你會明白，我沒有初始大小.. – 2012-02-24 05:37:00

這將給一點問題，一段時間的圖像將顯示與原始維度，直到用jQuery修改CSS。 [檢查這個jsFiddle]（http://jsfiddle.net/dAzyj/2/） – 2012-02-24 05:39:15

啊，我不知道你可以直接從.onload得到尺寸！這樣在應用style =標籤之前讀取尺寸？ – iono 2012-02-24 05:44:45

使用jQuery動畫將圖像調整爲原始尺寸

回答

相關問題