<ul>
<li><img /></li>
<li><img /></li>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>
它是一個水平列表,而不是垂直。在懸停上放大圖像
當我們懸停在圖像上時,我們如何放大其中一幅圖像?
<ul>
<li><img /></li>
<li><img /></li>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>
它是一個水平列表,而不是垂直。在懸停上放大圖像
當我們懸停在圖像上時,我們如何放大其中一幅圖像?
你應該通過維修器材兩幅圖像做這樣的事情。
我們做了一些例子,請更改名稱相應
$('.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');
});
該解決方案將照顧上增加高度和寬度
ul img:hover {
width: 180px;
height: 150px;
}
一些演示,您需要一種解決方法來支持IE6。
對於IE6,你可以嘗試包裹在<a>
形象,這樣做:
ul a:hover > img{
width: 180px;
height: 150px;
}
此解決方案會產生圖像模糊問題。我們需要將圖像與高分辨率圖像進行交換,否則圖像看起來不好 – 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付款:)
> *請在http://jsfiddle.net*上做一些演示至少你說過請。 – 2010-11-10 20:09:41
我寧願看到代碼_here_,而不是在不同的網站上。然而,我不介意它們都在這兩者上。 – Oded 2010-11-10 20:09:44
你可以發佈你到目前爲止的代碼嗎? – 2010-11-10 20:10:15