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

jquery 图像调整大小转换 onMouseOver

发布于 2024-09-14 10:14:24 字数 85 浏览 3 评论 0原文

只是想知道是否有任何 jquery 插件，当你的鼠标悬停在图像上时，该图像的大小会增加，如果你的鼠标移出图像，它的大小会减小，所有这些都是平滑过渡。谢谢！

原文

分享到QQ

分享到微博

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

发布评论

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

落花随流水 2024-09-21 10:14:24

您可以尝试 Zoomer 画廊插件，或基于本教程。就我个人而言，我会选择教程路线，因为它可以让您更好地控制结果（并且您将学到一些东西来引导；）

回复收藏 0 原文

仅冇旳回忆 2024-09-21 10:14:24

如果您只想要一张图像，您可以使用 jQuery 的 UI 效果。请注意，这与基本 jQuery 是分开的 - 将其添加到您的 jQuery 调用下方。

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

现在您已经添加了 UI 的链接，我们可以像这样使用它的效果库：

script:

$(document).ready(function() {
    $('#imgid').hover(function(){$(this).effect("scale",{percent:200},500)}, function(){$(this).effect("scale",{percent:50},500)})
});

html:

<img id="imgid" src="path/to/img.png" alt="(Vacation Slide)">

请记住，当您放大某些内容时，您需要弄清楚如何缩小，因为新尺寸将为 100% 。在我的代码中，我们将其加倍 (200%)，然后将其减少一半 (50%) 以恢复到原始值。请随意调整过渡时间以及您可能需要的任何回调以使其完美。

链接到 jQuery .hover() 和 jQuery UI 效果

If you just want one image you can use jQuery's UI effects. Note this is separate from the base jQuery - add this below your call of jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

Now that you've added a link to the UI we can use its effect library like so:

script:

$(document).ready(function() {
    $('#imgid').hover(function(){$(this).effect("scale",{percent:200},500)}, function(){$(this).effect("scale",{percent:50},500)})
});

html:

<img id="imgid" src="path/to/img.png" alt="(Vacation Slide)">

Just remember that when you scale something up you need to figure out how to scale back down since the new size will be 100%. In my code we double it (200%), then reduce it by half (50%) to get back to the original. Feel free to play with the transition time, and any callbacks you might need to get it perfect.

Link to the jQuery .hover() and to jQuery UI effects

回复收藏 0 原文

死开点丶别碍眼 2024-09-21 10:14:24

有一个 jQuery hack：

$(document).ready(function() {
    $('#target_selector').mouseover(function(){
        $(this).css('height':'value', 'width':'value')
        $(this).mouseout(function(){
            $('this').css('height':'value', 'width':'value')
        });
    });
});

但是您可以使用 CSS 伪类，:hover

#target_selector {
    height: value;
    width: value;
}
#target_selector:hover {
    height: value;
    width: value;
}

两者都可以应用于此示例 HTML

<html>

<body>

    <img id="target_selector" />

</body>

</html>

There is a jQuery hack:

$(document).ready(function() {
    $('#target_selector').mouseover(function(){
        $(this).css('height':'value', 'width':'value')
        $(this).mouseout(function(){
            $('this').css('height':'value', 'width':'value')
        });
    });
});

But you could use a CSS pseudo-class, :hover

#target_selector {
    height: value;
    width: value;
}
#target_selector:hover {
    height: value;
    width: value;
}

Either could be applied to this sample HTML

<html>

<body>

    <img id="target_selector" />

</body>

</html>

回复收藏 0 原文

~没有更多了~

关于作者

深陷

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

jquery 图像调整大小转换 onMouseOver

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

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

淡笑忘祈一世凡恋

我们的影子

素年丶

南笙

18215568913

qq_xk7Ean

友情链接

jquery 图像调整大小转换 onMouseOver

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

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

淡笑忘祈一世凡恋

我们的影子

素年丶

南笙

18215568913

qq_xk7Ean

友情链接

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