javascript - クリックしてHTMLの画像を拡大する方法

Question

HTMLページに画像があります。

<img src="http://s3-media1.ak.yelpcdn.com/bphoto/sMONYSiLUQEvooJ5hZh0Sw/l.jpg" alt="" width="200" height="150">

クリックして同じページで拡大表示するにはどうすればよいですか?

Answer 1

私はこれがあなたを助けると思います

<img src="http://s3-media1.ak.yelpcdn.com/bphoto/sMONYSiLUQEvooJ5hZh0Sw/l.jpg" class="img" alt="" width="200" height="150">


.img:hover{
    color: #424242; 
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(1.15);
  -ms-transform: scale(1.15); /* IE 9 */
  -webkit-transform: scale(1.15); /* Safari and Chrome */

}

要件に応じてスケールを変換できます。

Answer 2

あなたは純粋なcss3でそれを行うことができますtransform: scale();

例を表示

Answer 3

理想的に<img>は、idor クラスが必要です (特に複数ある場合)。width プロパティまたは style プロパティを変更することもできますが、おそらく最も簡単な方法はクラスを追加することです。

/* CSS */
.enlarged {
    width: 400px;
    height: 300px;
}

// JavaScript
Array.prototype.forEach.call(document.querySelector("img"), function (elem) {
    elem.addEventListener("click", function () {
        elem.classList.toggle("enlarged");
    });
});

ドキュメントにあるように自分でメソッドを定義しない限りforEach、上記のようなものには少なくとも IE10 が必要です。classList

Answer 4

jQuery の Click() および Attr() 関数を使用できます。

HTML：thumbnailImage などの ID を追加します。

jQuery:

$("#thumbnailImage").click(function() {
   $(this).attr('width', '400');
    $(this).attr('height', '300');
});

私の jsFiddle を参照してください: http://jsfiddle.net/VyYkE/1/

Answer 5

jQueryを使用して以下を使用できます。

$(function ()
{
    $('img').on('click', function ()
    {
        $(this).width(1000);
    });
});

Answer 6

画像にIDを与える

$(function ()
{
    $('#imageid').on('click', function ()
    {
        $(this).width(1000);
    });
});