悬停时放大图像答案

【问题标题】：Enlarge image on hover悬停时放大图像
【发布时间】：2010-11-10 20:07:18
【问题描述】：

<ul>
    <li><img /></li>
    <li><img /></li>
    <li><img /></li>
    <li><img /></li>
    <li><img /></li>
</ul>

它是一个水平列表，而不是垂直的。

当我们将鼠标悬停在其中一张图片上时，如何放大它？

【问题讨论】：

标签： javascript jquery image animation hover

【解决方案1】：

http://jsfiddle.net/pfuWr/

ul img:hover {
    width: 180px;
    height: 150px;
}

您需要一种解决方法来支持 IE6。

对于 IE6，您可以尝试将图像包装在 <a> 中，然后执行以下操作：

ul a:hover > img{
    width: 180px;
    height: 150px;
}

【讨论】：

此解决方案会出现图像模糊问题。我们需要用高分辨率图像交换图像，否则图像看起来很糟糕
@gov - 取决于。您可以拥有一张更高分辨率的图像，让 CSS 默认将其缩小，然后使用 :hover 将其调整为自然大小。

【解决方案2】：

你应该通过维护两个图像来做这样的事情。

我们做了一些例子，请相应地更改名称

$('.itemBox').bind('mouseenter',function(){
            $lrgImage = $(this).find('img');
            lrgImageSrc = $lrgImage.attr('src');
            bkImage = 'url(' + lrgImageSrc + ')';
            $(this).css('background-image',bkImage);
            $(this).css('background-position','center center');
            $lrgImage.fadeOut('fast');

        });
        $('.itemBox').bind('mouseleave',function(){
            $lrgImage = $(this).find('img');
            $(this).css('background-image','none');
            $lrgImage.fadeIn('fast');

        });

此解决方案将处理图像在增加高度和宽度时变得模糊

【讨论】：

【解决方案3】：

以下是在 jquery 中执行此操作的方法：

$('li > img').mouseover(function(){ $(this).css('width', '250px'); $(this).css('height', '250px'); }) $('li > img').mouseout(function(){ $(this).css('width', '200px'); $(this).css('height', '200px'); })

不过，这会破坏设计 - 您可能想考虑拍摄同一张照片并将其覆盖在不同 z-index 上的图像上。或者你可以clone图片，把它和UI position放在中间，然后使用.attr()或者.css()来改变它的大小。

【讨论】：

【解决方案4】：

您可以使用 CSS 转换属性轻松完成此操作。缩放功能可用于放大和缩小元素的大小。它在技术上应用了 3d 转换。所有元素的默认比例为 1。为了增加悬停时图像的大小，你可以这样做：

.ul img:hover {
   transform : scale(1.2); 
   transition : 0.5s ease; //Some animation
}

想进一步了解transform，可以click here

【讨论】：