我想让我的图片弹出时变大
[英]I would like to make my image pop out larger when I click on it
问题描述
I am new to HTML,CSS and Javascript. 
我是HTML，CSS和Java的新手。 I am trying to get my picture to pop out larger when I click on it but I do not know how to implement it. 我试图使我的图片在单击时弹出更大，但我不知道如何实现。 I have been trying to find a good Javascript tutorial but explain a technique for this. 我一直在试图找到一个好的Javascript教程，但是解释了一种技巧。 Please Help. 请帮忙。 (All I have right know is the code to put the image on the web page). （我所知道的只是将图像放在网页上的代码）。
I would like it to look something like this. 我希望它看起来像这样。
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image
but they do not show the javascript in the tutorial 但他们没有在教程中显示javascript
3 个解决方案
解决方案1
4 2015-07-20 23:24:00
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">
See http://caniuse.com/#feat=transforms2d and http://caniuse.com/#search=transition for more details about browser support and vendor prefixes. 有关浏览器支持和供应商前缀的详细信息，请参见http://caniuse.com/#feat=transforms2d和http://caniuse.com/#search=transition 。
解决方案2
2 2015-07-20 23:25:07
Try this. 尝试这个。 Change the src with your image name. 用您的图像名称更改src。 Regards! 问候！
<html>
<head>
<style>
.pop-out
{
transition: transform .5s;
}
.pop-out:hover
{
-ms-transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img src="test.jpg" class="pop-out">
</body>
</html>
解决方案3
0 2015-07-21 00:08:48
I have two great solutions :) 我有两个很好的解决方案：）
Option 1) 选项1）
HTML 的HTML
<img id="image" src="">
CSS 的CSS
#image {
width: 100%;
}
#image:hover {
width: 150%;
}
Option 2) 选项2）
HTML 的HTML
<img id="image" src="">
CSS 的CSS
#image {
width: 100%;
}
#image:hover {
transform: scale(1.5);
}
So simply, in both examples I am increasing the image size by 50%. 简而言之，在两个示例中，我都将图像尺寸增加了50％。 Now the two ways to do this are make a bigger width , or use scale(xx) . 现在，执行此操作的两种方法是增大width或使用scale(xx) 。
I hope I could help! 希望我能帮上忙！ :) :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.