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

鼠标悬停时弹出 Jquery 图像

发布于 2024-10-09 03:19:54 字数 353 浏览 2 评论 0原文

我想知道如何在 jQuery 中实现这种过渡效果 -

我有一张图像，当我用鼠标悬停在它上面时，图像会稍微过渡（尺寸放大）&当我将鼠标悬停在图像之外时，它会恢复到原始大小。

此行为就像我们在 Google 图片

原文

分享到QQ

分享到微博

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

发布评论

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

空心空情空意 2024-10-16 03:19:54

我不确定 jQuery，但你可以使用 CSS3 过渡。 CSS3 过渡并不适用于所有浏览器，但如果您想在 FF 和 Webkit 中获得乐趣...

假设您的图像包含在标记中（编辑：示例@ http://jsfiddle.net/Kai/x4Frn/）：

a img {
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

a:hover img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);

    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

I'm not sure about jQuery, but you can use CSS3 transitions. CSS3 transitions don't work in every browser, but if you want to have fun in FF and Webkit...

Assuming your images are wrapped in <a> tags (Edit: Example @ http://jsfiddle.net/Kai/x4Frn/):

a img {
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

a:hover img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);

    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

回复收藏 0 原文