Javascript resize image after a few seconds
Question
How would I resize an html image with Javascript? I would like the "Pack" image to become larger after 7 seconds. 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>
3 answers
solution1
1 2014-01-04 04:41:16
You can register a timeout function to change the elements styles after 7 seconds with the following:
setTimeout(function(){
var pack = document.getElementById("pack");
pack.style.width = "100%;";
}, 7000);
You will probably want to customize this to your use case.
solution2
0 2014-01-04 04:39:14
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".
solution3
0 2014-01-04 04:43:31
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Automatically change image after few seconds
Image in slider dissapear after few seconds
Javascript after 7 seconds slide image
JavaScript innerHTML for few seconds
Change image in HTML page every few seconds using Javascript
how to change image onclick for few seconds using javascript
How to make JavaScript display an animated GIF for a few seconds, and then display an image?
How to increase and decrease opacity after few seconds using javascript?
Close toastr.error after a few seconds in Javascript
How to add fade out after few seconds in append content in javascript
Related Tags