javascript - 当我点击它时，我想让我的图像弹出更大

Question

我是 HTML、CSS 和 Javascript 的新手。当我点击它时，我试图让我的图片弹出更大，但我不知道如何实现它。我一直在努力寻找一个好的 Javascript 教程，但为此解释了一种技术。请帮忙。 (我只知道将图像放在网页上的代码)。

我希望它看起来像这样。

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image

但他们没有在教程中显示 javascript

Answer 1

body {
  padding: 3em;
}

img {
  transition: transform .5s;
}

img:hover {
  transform: scale(2.5);
}

<img src="//www.gravatar.com/avatar/9708ca3dca5969e124d0730acf48d2e7?s=32&d=identicon&r=PG&f=1">

参见 http://caniuse.com/#feat=transforms2d和 http://caniuse.com/#search=transition有关浏览器支持和 vendor 前缀的更多详细信息。