0

我真的不知道如何解决这个问题。我有这个图像。这是一张缩略图，当有人点击它时，会弹出更大的图片。请不要告诉我我应该使用可下载的灯箱，这对我来说非常完美，除了我想要在有人点击它时也有淡入效果，而不仅仅是弹出的东西。

    <a href="javascript:void();" onclick="document.getElementById('image1').style.display='block'; document.getElementById('image1_lightbox').style.display='block';">
    <div class="thumbnail"><img src="image1.jpg" /></div>
    </a>
    <div id="image1" class="underlay" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
    </div>
    <div id="image1_lightbox" class="lightbox">
    <a href="javascript:void();" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
    <div><img width="100%" height="100%" src="image1" /></div>
    <div style="padding-left:6px; padding-bottom:8px; text-shadow:0.1em 0.1em #eee;">Some text asdasdasdasd.</div></a>

这是我的 CSS（灯箱和底层类）：

.underlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
-moz-opacity:0.5;
opacity:.50;
filter:alpha(opacity=50);
}

.lightbox{
display:none;
position:fixed;
top:100px;
left:25%;
width:50%;
z-index:100000;
background-color:#fff;
box-shadow:0px 0px 10px 5px #161616;
text-decoration:none;
}
4

1 回答 1

2

您可以使用 jQuery 中的 fadeIn() 方法：http: //jsfiddle.net/WTPUj/

<a href="javascript:void();" onclick="$('#image1').fadeIn(); $('#image1_lightbox').fadeIn();">
<div class="thumbnail"><img src="image1.jpg" /></div>
</a>
<div id="image1" class="underlay" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
</div>
<div id="image1_lightbox" class="lightbox">
<a href="javascript:void();" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
<div><img width="100%" height="100%" src="image1" /></div>
<div style="padding-left:6px; padding-bottom:8px; text-shadow:0.1em 0.1em #eee;">Some text asdasdasdasd.</div></a>

fadeIn 方法文档：http ://api.jquery.com/fadeIn/

于 2013-06-25T13:48:40.203 回答