1.html
<img class="pimg" src="1.jpg" width="200px"/>
<div id="BigImg">
<div id="BigDiv">
<img id="bigImg" src=""/>
</div>
</div>
2.css
#BigImg{
display: none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
}
#BigDiv{
position:absolute;
}
3.js
$(function(){
$(".pimg").click(function(){
var _this = $(this);
showBigImg("#BigImg","#BigDiv","#bigImg", _this);
})
function showBigImg(BigImg,BigDiv,bigImg,_this){
//获取img的src属性
var src = _this.attr("src");
//获取当前图片的宽高
var width = _this.width();
var height = _this.height();
//获取屏幕的宽高
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var scale = 0.8;
var imgWidth,imgHeight;
$(bigImg).attr("src",src);
//如果图片的宽度超过屏幕的80%=>图片宽度等比例缩小、高度也跟着缩小
if(width>screenWidth*scale){
imgWidth = screenWidth*scale;
imgHeight = imgWidth/width*height;
//图片的高度超过屏幕的80%=>高度等比例缩小,宽度也跟着等比例缩小
}else if(height>screenHeight*scale){
imgHeight = screenHeight*scale;
imgWidth = imgHeight/height*width;
if(imgWidth>screenWidth*scale){
imgWidth = screenWidth*scale;
}
}else{
imgWidth = width;
imgHeight = height;
}
console.log(screenHeight);
$(bigImg).css("width",imgWidth);
$(bigImg).css("height",imgHeight);
var h = (screenHeight - imgHeight)/2;
var t = (screenWidth - imgWidth)/2;
$(BigDiv).css({"top":h,"left":t});
// console.log(src);
//背景层淡入显示
$(BigImg).fadeIn("fast");
}
$("#BigImg").click(function(){
//背景层淡出隐藏
$("#BigImg").fadeOut("fast");
})
})
4.效果图