几秒钟后，Javascript调整图像大小

Question

How would I resize an html image with Javascript? 如何使用Javascript调整HTML图片的大小？ I would like the "Pack" image to become larger after 7 seconds. 我希望“打包”图像在7秒后变大。 Here is my code: 这是我的代码：

<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <!-- Pack -->
        <img id="pack" src="http://cloud.attackofthefanboy.com/wp-content/uploads/2013/07/fifa14pack.png">

        <!-- Sparkles-->
    <div id="sparkles">

        <img id="sparkle1" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">

        <img id="sparkle2" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">

        <img id="sparkle3" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">

        <img id="sparkle4" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">

        <img id="sparkle5" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">

        <img id="sparkle6" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">

        <img id="sparkle7" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">

        <img id="sparkle8" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
        </div>

Answer 1

You can register a timeout function to change the elements styles after 7 seconds with the following: 您可以注册超时功能，以在7秒后使用以下命令更改元素样式：

setTimeout(function(){
    var pack = document.getElementById("pack");
    pack.style.width = "100%;";
}, 7000);

You will probably want to customize this to your use case. 您可能需要针对您的用例进行自定义。

Answer 2

Try: 尝试：

setTimeout(function(){document.getElementById("pack").style.width="soandsopx";document.getElementById("pack").style.height="soandsopx";},7000);

Where "soandsopx" is the number of pixels you want it to have, plus "px". 其中“ soandsopx”是您想要的像素数加上“ px”。

Answer 3

This will do the trick: 这将达到目的：

window.setTimeout(function () {
    var pack_image = document.getElementById('pack');
    if(pack_image && pack_image.style) {
        pack_image.style.height = '700px';
        pack_image.style.width = '700px';
    }
},7000);

jsFiddle of this code jsFiddle的这段代码

几秒钟后，Javascript调整图像大小

问题描述

3 个解决方案

解决方案1
1 2014-01-04 04:41:16

解决方案2
0 2014-01-04 04:39:14

解决方案3
0 2014-01-04 04:43:31

几秒钟后，Javascript调整图像大小

问题描述

3 个解决方案

解决方案1 1 2014-01-04 04:41:16

解决方案2 0 2014-01-04 04:39:14

解决方案3 0 2014-01-04 04:43:31

解决方案1
1 2014-01-04 04:41:16

解决方案2
0 2014-01-04 04:39:14

解决方案3
0 2014-01-04 04:43:31