Question

这就是我想要做的。我在桌子中间有一张缩略图表和一张更大的图像。

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）对于img01，大图像将变为400x400图像（即img01_400x400.jpg）

当您同时点击缩略图时，“BIG IMAGE”将变为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>

Answer 1

这是一个很好的淡化效果。它淡化了背景图像上的图像。希望它可以帮助你开始。

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)             
        })                    
});

在悬停时更改多个图像：jquery / css / html

1 个答案: