在悬停上放大图像

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

它是一个水平列表，而不是垂直。在悬停上放大图像

当我们悬停在图像上时，我们如何放大其中一幅图像？

请在http://jsfiddle.net

来源

2010-11-10 James

> *请在http：//jsfiddle.net*上做一些演示至少你说过请。 – 2010-11-10 20:09:41

我宁愿看到代码_here_，而不是在不同的网站上。然而，我不介意它们都在这两者上。 – Oded 2010-11-10 20:09:44

你可以发布你到目前为止的代码吗？ – 2010-11-10 20:10:15

你应该通过维修器材两幅图像做这样的事情。

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

$('.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'); 

     });

该解决方案将照顾上增加高度和宽度

来源

2010-11-10 20:19:34 kobe

http://jsfiddle.net/pfuWr/

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

一些演示，您需要一种解决方法来支持IE6。

对于IE6，你可以尝试包裹在<a>形象，这样做：

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

来源

2010-11-10 20:11:45 user113716

此解决方案会产生图像模糊问题。我们需要将图像与高分辨率图像进行交换，否则图像看起来不好 – kobe 2010-11-10 20:16:32

@gov - 取决于。你可以有一个更高分辨率的图像，默认情况下使CSS变小，然后用'：hover'将其设置为自然尺寸。 – user113716 2010-11-10 20:50:03

Roatin形象越来越模糊的是正确的 - 计算器是不是要求对方代码给你，而不是查找如何完成任务的地方。这里的jQuery中完成的50种方法之一：

 
$('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（）更改它的大小。

P.S.将代码为您容易通过PayPal $ 50付款:)

来源

2010-11-10 20:24:14 dsomnus

在悬停上放大图像

回答

相关问题