懸停改變多個圖像：jQuery的/ CSS/HTML

這就是我想要做的事。我有一張縮略圖圖片和一張放在桌子中央的較大圖片。懸停改變多個圖像：jQuery的/ CSS/HTML

img01 | img02 | img03 | img04 

img05 | `*BIG IMAGE *` | img06 

img07 | `*BIG IMAGE *` | img08 

img09 | `*BIG IMAGE *` | img10 

img11 | `*BIG IMAGE *` | img12 

img13 | img14 | img15 | img16

當將鼠標懸停在縮略圖圖像：

1）的縮略圖的變化從50％到100％，
2）原圖不透明度將改變爲400x400的圖像IMG01（即img01_400x400。 JPG）

當你還點擊縮略圖，在「大圖」將變更爲400x400的圖片

我能得到編碼正常工作到步驟（1）其中縮略圖的不透明度ç懸停懸停。

有誰知道如何完成步驟（2）？任何幫助不勝感激。我一直堅持這幾天。

邁克評論

添加的代碼片段

這是我迄今爲止的CSS：

.hovereffect img { opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; } 
.hovereffect:hover img { opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1; }

這是一段代碼片段的縮略圖之一：

<td align="center"> 
    <a class="hovereffect" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="/ad01.php"><img style="cursor: pointer; width: 66px; height: 66px;" src="/images/ad_01d.png" alt="Hover Effect" id="" border="0" /></a> 
</td>

來源

2012-10-02 blueantz

我們可以看到代碼PLZ？ –

這將有助於查看您正在使用的代碼或簡化的模型，以便我們可以對之後的某些內容有所瞭解 –

顯示一些代碼 – geekman

這裏是良好的淡化效果。它在背景圖像上淡出圖像。希望它能讓你開始。

http://jsfiddle.net/Diodeus/gYyBL/

HTML：

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg" bigImg="http://i.imgur.com/Epl4db.jpg"> 
<img src="" style"display:none" id="big">

JS：

$('body').find('*[hoverImg]').each(function(index){ 
    $this = $(this); 
    $this.wrap('<div>') ; 
    $this.parent().css('width',$this.width()) ; 
    $this.parent().css('height',$this.width()); 
    $('#big').attr('src',$this.attr('hoverImg')); <-- this will show the big image; 
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")") 
     $this.hover(function() { 
      $(this).stop() 
      $(this).fadeTo('',.01)  
     },function() { 
      $(this).stop() 
      $(this).fadeTo('',1)    
     })      
});

來源

2012-10-02 19:15:24

已經覆蓋了該部分。在步驟（2）討論的懸停中需要幫助弄清楚如何更改第二張圖片。 – blueantz

我會進行編輯以支持此操作。 –

懸停改變多個圖像：jQuery的/ CSS/HTML

回答

相關問題