Question

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

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

Answer 1

您可以使用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/

jQuery在我自制的灯箱上淡出效果

1 个答案: