Javascript 鼠标悬停时的 html 缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4940466/
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
html zoom on mouse over
提问by pvinis
I want to have a photo in a site, and when I mouse over, I want a little magnifier zoom effect.
我想在网站上放一张照片，当我将鼠标悬停在上面时，我想要一点放大镜缩放效果。
Can I do this in html with canvas or something? javascript maybe?
我可以用画布或其他东西在 html 中做到这一点吗？javascript也许？
thank you
谢谢你
采纳答案by Ori
Canvas isn't supported by IE without third-party plug-ins. You'll want to do this in JavaScript. jQuery makes this very easy and clean. Bind handlers for the hover in / out events for the image element you want to zoom using .hover(). "Binding handlers" simply means you pass two functions to .hover() which will be executed when the user hovers in and out, respectively. These functions will use animate(), which you can simply pass a new size.
没有第三方插件的 IE 不支持 Canvas。您会希望在 JavaScript 中执行此操作。jQuery 使这变得非常简单和干净。为要使用缩放的图像元素的悬停输入/输出事件绑定处理程序.hover()。“绑定处理程序”只是意味着您将两个函数传递给 .hover() ，它们将分别在用户悬停进入和离开时执行。这些函数将使用animate()，您可以简单地传递一个新的大小。
Have a look at the documentation for .animate()and .hover(). If you're totally new to jQuery, check out the tutorials.
查看.animate()和.hover()的文档。如果您完全不熟悉 jQuery，请查看教程。
回答by Piyush Mattoo
Enclose your photo in a div and add Zoomvia CSS on hover. You may want to increase the z-index upon hover. You can add to the below CSS to make the zoomed photo look/style better. If you don't want to reinvent the wheel, look out for some Jquery plugin which may accomplish the same thing in an elegant manner with less effort.
将您的照片放在一个 div 中，并在悬停时通过 CSS添加缩放。您可能希望在悬停时增加 z-index。您可以添加到下面的 CSS 以使放大的照片看起来/样式更好。如果您不想重新发明轮子，请注意一些 Jquery 插件，它们可以以优雅的方式轻松完成相同的事情。
CSS:
CSS：
#div-1 {
position: absolute;
}
#div-1.hover {
position: absolute; zoom: 70%; border: solid 1px; z-index:10;
}
Jquery/Javascript:
jQuery/Javascript：
<script type = "text/javascript">
$(document).ready(function() {
$(".div-1").onmouseover(function() {
toggle_visibility('div-1');
})
function toggle_visibility(id) {
var e = document.getElementById(id);
if ($(e).hasClass("hover")) {
$(e).removeClass("hover");
} else {
$($(e)).addClass("hover");
$($(e)).attr({
width: "100%",
height: "100%"
});
}
}}); < /script>
回答by Wolph
You can show the image in a div as a background-image and change the position with a little javascript.
您可以将 div 中的图像显示为背景图像，并使用一点 javascript 更改位置。
Here's a library with some examples: http://www.mind-projects.it/projects/jqzoom/demos.php
这是一个带有一些示例的库：http: //www.mind-projects.it/projects/jqzoom/demos.php
回答by Dave O.
回答by Hamid
I found some relative example, so visit these:
我找到了一些相关的例子，所以访问这些：
- example in ajax-zoom website.
- another example: Zoom Effect (Caribbean),Frame Effect (Mona Lisa),X-Ray Effect (Homer),Print Effect (G5) .
- GOOOOOOOOOGLE :)
- ajax-zoom 网站中的示例。
- 另一个例子：缩放效果（加勒比）、帧效果（蒙娜丽莎）、X 射线效果（荷马）、打印效果（G5）。
- GOOOOOOOOGLE :)
