javascript - 鼠标悬停html缩放

Question

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

我可以用 Canvas 或其他东西在 html 中做这个吗？也许是 JavaScript？

谢谢

Answer 1

将您的照片放在一个 div 中并添加 Zoom通过 CSS 悬停。您可能希望在悬停时增加 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>