悬停时的图像动画jquery

Posted 2023-05-08

【中文标题】悬停时的图像动画jquery

【英文标题】：image animation jquery on hover

【发布时间】：2013-05-19 02:53:16

【问题描述】：

好的，

我希望当我将鼠标悬停在包含图像的 <li> 元素时，图像会变大（就像在谷歌图像缩略图中一样

<div>
    <ul class="images">
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
    </ul>
</div>

问题是，如果我只是为 li 设置动画，其他图片会移动，设计会被破坏。

如果需要，这是我的jsfiddle...谢谢

【问题讨论】：

为什么有人会否决我的问题？

不知道，刚刚投了赞成票。这是一个不错的问题

+1 这是个好问题

【参考方案1】：

你的 li 必须是相对定位的，并且在其中包含一个绝对定位的元素。 li 悬停状态会使其他元素展开，但由于它们是 'position:absolute'，因此不会影响其他 li 定位。

点赞（伪代码）：

liwidth:150px; height:100px; position:relative
li spanwidth:150px; height:100px; position:absolute; top:0; left:0; display:block
li:hover spanwidth:200px; height:150px; top:-25px; left:-25px

您还可以通过 javascript 更改 img 的 src 属性以在悬停时加载微小的缩略图和更大的详细图像。

如果您需要动画，只需添加 jQuery Animate 即可。

Fiddle on

pure css

【讨论】：

虽然我使用 jquery 做了同样的事情（没有纯 css :) 但我仍然有问题，照片的动画效果正确，但即使使用 z-index:999999999999 仍然有图像悬停图像的右侧可见..

它做了类似的事情：link

其他浏览器也会这样吗？

【参考方案2】：

你可以在这里找到各种plug ins。它们是不错的插件

【讨论】：

... 好的，但如果我想自己做呢？

所有的 css 都在那里可用。你可以使用它

【参考方案3】：

我觉得你需要这样的

看到这是根据您的要求的简单伪代码不知道您到底需要什么。

jQuery 代码

$('.images img').on(
    mouseenter: function()
        $(this).animate(width: '170px', height: '120px', top: '-=15px', left: '-=15px', 500);
    ,
    mouseleave: function()
        $(this).animate(width: '150px', height: '100px', top: '+=15px', left: '+=15px', 500);
    
);

See Live DEMO

【讨论】：

谢谢 Dhaval Marthak，但这不是我想要的。我希望图像变大，而其他图像根本不动！

【参考方案4】：

$("li").hover(function() 
    $("img").css('height':'200px', 'width':'300px');
);

大概是这样的吧？

【参考方案5】：

我终于找到了一种无需 jQuery 即可为图像设置动画的最简单方法， 仅使用 CSS3 过渡：

img

    width: 90%;
    height: 90%;
    -webkit-transition: max-width 0.5s, height 0.5s;
       -moz-transition: max-width 0.5s, height 0.5s;
          o-transition: max-width 0.5s, height 0.5s;
            transition: max-width 0.5s, height 0.5s;


img:hover

        width: 120%;
    height: 120%;