我想请教一下如何对多张图片复用下面的代码: http://jsfiddle.net/a8c9P/
如何避免CSS代码冗余?
一个更新的例子:http://jsfiddle.net/a8c9P/156
$("#imgSmall").click(function() {
$("#imgBig").attr("src", "http://www.freeimageslive.com/galleries/sports/music/pics/musical_notes.jpg");
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
最佳答案
http://jsfiddle.net/a8c9P/157/
HTML
<div id="overlay"></div>
<div id="overlayContent">
<img id="imgBig" src="" alt="" width="400" />
</div>
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
JS
$(".imgSmall").click(function(){
$("#imgBig").attr("src",$(this).attr('src'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
CSS
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
#overlayContent{
position: fixed;
width: 100%;
top: 100px;
text-align: center;
display: none;
overflow: hidden;
z-index: 100;
}
#contentGallery{
margin: 0px auto;
}
#imgBig, .imgSmall{
cursor: pointer;
}
关于javascript - jQuery - 多张图片的点击缩放功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25426242/