2010-11-10 98 views
0
<ul> 
    <li><img /></li> 
    <li><img /></li> 
    <li><img /></li> 
    <li><img /></li> 
    <li><img /></li> 
</ul> 

它是一個水平列表,而不是垂直。在懸停上放大圖像

當我們懸停在圖像上時,我們如何放大其中一幅圖像?

請在http://jsfiddle.net

+4

> *請在http://jsfiddle.net*上做一些演示至少你說過請。 – 2010-11-10 20:09:41

+1

我寧願看到代碼_here_,而不是在不同的網站上。然而,我不介意它們都在這兩者上。 – Oded 2010-11-10 20:09:44

+0

你可以發佈你到目前爲止的代碼嗎? – 2010-11-10 20:10:15

回答

1

你應該通過維修器材兩幅圖像做這樣的事情。

我們做了一些例子,請更改名稱相應

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

     }); 

該解決方案將照顧上增加高度和寬度

4

http://jsfiddle.net/pfuWr/

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

一些演示,您需要一種解決方法來支持IE6。


對於IE6,你可以嘗試包裹在<a>形象,這樣做:

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

此解決方案會產生圖像模糊問題。我們需要將圖像與高分辨率圖像進行交換,否則圖像看起來不好 – kobe 2010-11-10 20:16:32

+0

@gov - 取決於。你可以有一個更高分辨率的圖像,默認情況下使CSS變小,然後用':hover'將其設置爲自然尺寸。 – user113716 2010-11-10 20:50:03

1

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付款:)