Javascript 使用jQuery动画将图像调整为其原始尺寸

我想使用jQuery将图像从200x300px设置为其原始大小

我有这张照片：

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

它工作得很好，但实际上我必须硬编码未来的尺寸。我想动画的原始大小

---

我该怎么做呢？

好的，我现在明白你的意思了

$bigImg.width将返回px中的宽度，而height将执行类似的操作。您还可以使用.outerWidth和.innerWidth分别包含填充/边框或仅包含填充

从代码中，您已经使用内联样式更改了图像的原始尺寸。相反，保存图像尺寸，在jQuery中将图像更改为200 x 300px，执行所需操作，然后将其更改回原始尺寸：

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文档：

---

或者

好吧，我现在明白你的意思了

$bigImg.width将返回px中的宽度，而height将执行类似的操作。您还可以使用.outerWidth和.innerWidth分别包含填充/边框或仅包含填充

从代码中，您已经使用内联样式更改了图像的原始尺寸。相反，保存图像尺寸，在jQuery中将图像更改为200 x 300px，执行所需操作，然后将其更改回原始尺寸：

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文档： 或者尝试这样做

HTML

你可以调整以适合你。希望这对您有所帮助。

尝试这样做

HTML

---

你可以调整以适合你。希望这对您有所帮助。

我编辑了我的帖子，生成了我的图像。看看我的代码，你会明白我没有初始尺寸。这不会有什么问题，在用jquery修改css之前，图像会以原始尺寸显示。啊，我不知道你可以直接从中获取尺寸。加载！这样在应用style=标记之前就可以读取尺寸了吗？我编辑我的帖子，我的图像就生成了。看看我的代码，你会明白我没有初始尺寸。这不会有什么问题，在用jquery修改css之前，图像会以原始尺寸显示。啊，我不知道你可以直接从中获取尺寸。加载！那么在应用style=标记之前读取尺寸？我正在尝试。那么你一开始就在创造一个新形象？也许我可以用它来代替imgHtml？请参阅代码更新..好的一点。。。检查JSFIDLE。也更新了我的答案。让我知道它是否有效。我正在努力。我会告诉你，如果它在几秒钟内工作，当图像在客户端机器上下载时，你可以放一些消息或gif来指示图像正在下载。主题I'm South Park fan：嗯，当您单击submit时，图像必须显示300 x 200，然后将其大小调整为原始值。此代码预加载图像。对不起，我不认为具体说明很重要。我正在努力。那么你一开始就在创造一个新形象？也许我可以用它来代替imgHtml？请参阅代码更新..好的一点。。。检查JSFIDLE。也更新了我的答案。让我知道它是否有效。我正在努力。我会告诉你，如果它在几秒钟内工作，当图像在客户端机器上下载时，你可以放一些消息或gif来指示图像正在下载。主题I'm South Park fan：嗯，当您单击submit时，图像必须显示300 x 200，然后将其大小调整为原始值。此代码预加载图像。对不起，我认为没有必要具体说明。。

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

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