Javascript измените размер изображения через несколько секунд

Как изменить размер html-изображения с помощью Javascript? Я хотел бы, чтобы изображение «Pack» стало больше через 7 секунд. Вот мой код:Javascript измените размер изображения через несколько секунд

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

источник

2014-01-04 Journey

Вы должны показать нам, что вы пробовали до сих пор. Покажите нам некоторые из ваших JS-кодов. Stackoverflow не для других, пишущих для вас код. – patrick

Try:

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

Где "soandsopx" это количество пикселей, которые вы хотите его иметь, плюс "точек".

источник

2014-01-04 04:39:14 Atutouato

Он отлично работает, я думаю, что в конечном итоге я это сделаю. Он короткий и выполняет свою работу. – Journey

@Journey, спасибо! – Atutouato

Вы можете зарегистрировать функцию тайм-аут, чтобы изменить стиль элементов после 7 секунд следующее:

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

Вы, вероятно, хотите, чтобы настроить это ваш случай использования.

источник

2014-01-04 04:41:16

Большое спасибо. Я хочу изменить положение изображения после изменения размера, спасибо еще раз. :) – Journey

Это будет делать трюк:

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

источник

2014-01-04 04:43:31 Lochlan

Спасибо! :) – Journey

Знаете ли вы, как я отредактировал бы положение изображения? Я попытался это: window.setTimeout (функция() { вар pack_image = document.getElementById ('пакет'); если (pack_image && pack_image.style) { pack_image.style.height = '350px'; pack_image.style .width = '250px'; pack_image.style.top = '% 50'; pack_image.style.left = '% 50'; } }, 7000); – Journey

Невозможно ответить на этот вопрос, не зная, как выглядит остальная часть CSS. За дополнительной информацией обращайтесь к этой статье о позиционировании CSS. (Http://www.w3schools.com/css/css_positioning.asp). – Lochlan

Javascript измените размер изображения через несколько секунд

ответ

Смежные вопросы