几秒后Javascript调整图像大小

时间:2014-01-04 04:37:03

标签: javascript html image testing

如何使用Javascript调整html图像的大小?我希望“包装”图像在7秒后变大。这是我的代码:

<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>

3 个答案:

答案 0 :(得分:1)

您可以使用以下内容注册超时功能以在7秒后更改元素样式:

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

您可能希望根据您的使用情况对其进行自定义。

答案 1 :(得分:0)

尝试:

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

在哪里&#34; soandsopx&#34;是你希望它拥有的像素数,再加上&#34; px&#34;。

答案 2 :(得分:0)

这样可以解决问题:

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