Question

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

我可以在带有画布的html中做到这一点吗？也许是javascript？

谢谢

Answer 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>

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Answer 5

我找到了一些相关的例子，请访问以下内容：

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

html放大鼠标

5 个答案: