JQ实现点击小图显示大图
代码块
js,例如:
/*图片*/
$('.imgJs').each(function() {
var imgHeight = $(this).height(),
aHeight = $(this).parent().height();
if(imgHeight<aHeight){
$(this).css({'height':aHeight,'width':'auto'})
}
});
/*图片显示大图*/
$('.deImg').each(function() {
$(this).click(function(){
$('body').css({'height':'100%','overflow':'hidden'});
$('.imgBg').fadeIn(500);
var src = $(this).attr('src');
$('.showImg').attr('src',src);
var winHeight = $(window).height();
var imgHeight = $('.showImg').height();
if(imgHeight<winHeight){
var curHeight = winHeight -imgHeight;
var radHeight = curHeight /2;
$('.imgBgMain').css('margin-top',radHeight);
}
});
$('.imgBg').click(function(){
$('body').removeAttr('style');
$(this).fadeOut(500);
});
});
html,例如:
<img src="images/icon_touxiang.png" class="user-img deImg imgJs">
<div class="imgBg">
<div class="imgBgMain">
<img src="images/jsz_1.png" alt="" class="showImg" width="100%" />
</div>
</div>