当前位置：文江博客话题详情

html 鼠标悬停时缩放

发布于 2024-10-16 16:09:13 字数 103 浏览 2 评论 0原文

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

我可以用canvas之类的html来做到这一点吗？也许是JavaScript？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清旖 2024-10-23 16:09:13

将您的照片放在 div 中，并在悬停时通过 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>

Enclose your photo in a div and add Zoom via 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.

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>

回复收藏 0 原文

雾里花 2024-10-23 16:09:13

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

查看 .animate() 和 .hover()。如果您对 jQuery 完全陌生，请查看教程。