html放大鼠标答案

【问题标题】：html zoom on mouse overhtml放大鼠标
【发布时间】：2011-06-23 20:26:24
【问题描述】：

我想在网站上放一张照片，当我将鼠标悬停时，我想要一点放大镜的缩放效果。

我可以用画布或其他东西在 html 中执行此操作吗？也许是javascript？

谢谢

【问题讨论】：

【解决方案1】：

将您的照片包含在一个 div 中，并在悬停时通过 CSS 添加Zoom。您可能希望在悬停时增加 z-index。您可以添加到下面的 CSS 以使缩放的照片看起来/样式更好。如果您不想重新发明轮子，请注意一些 Jquery 插件，它可以以更优雅的方式完成同样的事情，而且工作量更少。

CSS：

#div-1 {
            position: absolute;
        }
#div-1.hover {
            position: absolute; zoom: 70%; border: solid 1px; z-index:10;
        }

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>

【讨论】：

【解决方案2】：

没有第三方插件的 IE 不支持 Canvas。您需要在 JavaScript 中执行此操作。 jQuery 使这变得非常简单和干净。使用.hover() 为要缩放的图像元素绑定悬停/悬停事件处理程序。 “绑定处理程序”只是意味着您将两个函数传递给 .hover() ，它们将分别在用户悬停和悬停时执行。这些函数将使用animate()，您可以简单地传递一个新的大小。

查看.animate() 和.hover() 的文档。如果你是 jQuery 的新手，check out the tutorials.

【讨论】：

【解决方案3】：

您可以将 div 中的图像显示为背景图像，并使用一点 javascript 更改位置。

这是一个包含一些示例的库：http://www.mind-projects.it/projects/jqzoom/demos.php

【讨论】：

如何使用 jQZoom 使缩放区域变为圆形？
@codecowboy：我在这里写了回复：stackoverflow.com/questions/5856381/…
如果你把它放在这里就不会那么混乱了！但是谢谢:-)
@codecowboy：啊……我的错。我以为这也是关于 jQZoom

【解决方案4】：

我想我找到了你想要的东西：loupe.js。据我所见，这是最好看的放大镜/放大镜效果之一。

【讨论】：

【解决方案5】：

我找到了一些相关的例子，所以访问这些：

example in ajax-zoom website。
另一个example: Zoom Effect (Caribbean),Frame Effect (Mona Lisa),X-Ray Effect (Homer),Print Effect (G5) 。
GOOOOOOOOOGLE :)

【讨论】：

虽然您提供的链接可能会回答问题，但最好将解决方案的基本部分直接放在答案中，以防链接将来过期。