0

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

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) BIG IMAGE 将变为 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>
4

1 回答 1

0

这是一个很好的淡入淡出效果。它淡出背景图像之上的图像。希望它能让你开始。

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-02T19:15:24.910 回答