Javascript 悬停在图像上时如何放大图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2252324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to enlarge image while hover over an image?
提问by Rajasekar
I want to show the thumbnail image large when hover over it, similar to the one in
我想在将鼠标悬停在其上时显示大缩略图，类似于
http://www.freelayouts.com/websites/html-templatesPlz help. Any help will be appreciated.
http://www.freelayouts.com/websites/html-templates 请帮忙。任何帮助将不胜感激。
回答by mre
What you need is a tooltip plugin. There are plenty of them. Check out this list: https://cssauthor.com/jquery-css3-hover-effects/
你需要的是一个工具提示插件。有很多。查看此列表：https: //cssauthor.com/jquery-css3-hover-effects/
回答by Tomas Prado
<img class="enlarge-onhover" src="img.jpg">
...
And on the css:
.enlarge-onhover {
width: 30px;
height: 30px;
}
.enlarge-onhover:hover {
width: 70px;
height: 70px;
}
回答by Charles
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
The function bigImg()is triggered when the user mouse over the image. This function enlarges the image.
bigImg()当用户将鼠标悬停在图像上时触发该功能。此功能可放大图像。
The function normalImg()is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.
normalImg()当鼠标指针移出图像时触发该功能。该函数将图像的高度和宽度设置回正常。
回答by Nick Allen
Take a look at http://fancybox.net/blog
Fancybox looks nice, uses JQuery and is highly configurable with various show/hide effects. Tutorial number 3 on this page shows you how to use it OnHover rather than OnClick
Fancybox 看起来不错，使用 JQuery 并且具有各种显示/隐藏效果的高度可配置性。此页面上的教程编号 3 向您展示了如何使用它 OnHover 而不是 OnClick
The home page http://fancybox.net/homeshows some examples of the visual effect
主页http://fancybox.net/home展示了一些视觉效果的例子
