2016-12-11 6 views
0

サムネイル画像を作成しようとしていますが、サムネイル画像は大きいバージョンにアニメーション化され、5秒間表示されてから「表示」ボタンをクリックすると元のサイズに戻ります。 window.setIntervalメソッドとwindow.clearIntervalメソッドを使用することは絶対必要です。ここでクリック時にsetInterval&clearIntervalで拡大画像を作成しますか?

は、これまでの私の試みです:https://jsfiddle.net/Lm1y51pb/1/

var myVar = setInterval(function(){ enlargeImg() }, 5000); // expand for 5 seconds 

    function enlargeImg() { 
     var img = document.getElementById("myImg"); 
     var width = 0; 
     var height = 0; 
     // how do I expand the image with this so far? 
    } 

    function myStopFunction() { 

     if(5000 secs have passed) 
     clearInterval(myVar); 
    } 

私は5秒が経過している場合は、上記の機能を停止させる画像を拡大で、主にmyStopFunctionに問題を()抱えています。

最大幅と高さは500pxです。

+0

'img.style.widthは= '自動';'と 'img.style.heightは= '自動';' – haim770

+0

'拡大版では' という意味?最大幅/高さは何ですか? – sinisake

+0

@ haim770すごく、 'img.style.width = 'auto';'をjavascript変数にどのように割り当てることができると思いますか? –

答えて

0

これは動作するはずです:

var myVar = setInterval(function(){ enlargeImg() }, 5000); 
 

 
function enlargeImg() { 
 
    var img = document.getElementById("myImg"); 
 
    var width = 0; 
 
    var height = 0; 
 
    img.style.width = 'auto'; 
 
    img.style.height = 'auto'; 
 
}
<img id="myImg" src="http://i.imgur.com/XCCso5f.jpg" alt="" width="250" height="250" /> 
 
<button onclick="enlargeImg()">View</button>

+0

興味深いが、コードは@slonskiを実行しないJSFiddleや他の何かを使うのは気になる? –

+0

申し訳ありませんが、私の間違いは、固定 – Slonski

+0

もう1つ、私はコードでsetIntervalとclearIntervalを実装しようとしましたが、それは、任意の提案は動作しません? http://codepen.io/anon/pen/oYPgxO –

関連する問題