先上效果图，看看是不是你需要的：
左边为动图，中间为长图，右边为正常的图
点击后效果分别为：
两种逻辑：一种是展示图宽大于高，则宽度满屏，高度同比例缩放；另一种是高大于宽；高满屏；宽等比例缩放，显示位置都是宽高居中。但是考虑起来需要有多种情况。
我的实际项目页面中图片的宽度width:100%;高度不设置；那么需要考虑原始图片的宽高情况；
iw, ih为要设置的点击后弹出的图片的宽和高；
ww, wh为屏幕的宽高；
rw,rh为实际的图片宽高；
（页面中图片的宽度width:100%按照屏幕的宽度显示，所以需要考虑图片实际宽高）。
分析思路如下：
一、rw <= ww
1、rw <= ww 且 rh<=wh 真实图片宽度小于等于屏幕宽度，真实图片高度也小于等于屏幕高度时， iw=ww ；ih=rh*ww/rw ;
手机拍的图真大。。
2、rw <= ww 且 rh>wh 真实图片宽度小于等于屏幕宽度，真实图片高度大于屏幕高度时，ih=wh ; iw=rw*wh/rh ;
二、rw > ww
1、rw > ww 且 rh<=wh 真实图片宽度大于等于屏幕宽度，真实图片高度也小于等于屏幕高度时，iw=ww; ih=ww*rh/rw ;
以下图都是简化啊，大家根据图1，图2参数设置进行分析
2、rw > ww 且 rh>wh 真实图片宽度大于等于屏幕宽度，则需要考虑两种情况
1）rw/rh <= ww/wh时 真实的图片宽高比小于等于屏幕的宽高比时，应该以高度为准，ih=wh; iw=rw*wh/ww;
2）rw/rh > ww/wh时 真实的图片宽高比大于等于屏幕的宽高比时，应该以宽度为准，iw=ww; ih=ww*rh/rw。
总结：整体看有些情况可以合并在一起的，大家自行合并哦。这样效果很不错。
另外再补充一点，苹果手机的点击事件，要避免300ms的延迟，点击对象应该添加cursor:pointer；
贴出代码：
html
$(".article-content").on("click","img",function () {
var _this =$(this);//将当前的pimg元素作为_this传入函数
q.imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
function imgShow(outerdiv, innerdiv, bigimg, _this){
var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
$(bigimg).attr("src", src);//设置#bigimg元素的src属性
/*获取当前点击图片的真实大小，并显示弹出层及大图*/
var windowW = $(window).width();//获取当前窗口宽度
var windowH = $(window).height();//获取当前窗口高度
var realWidth =this.width;//获取图片真实宽度
var realHeight =this.height;//获取图片真实高度
console.log(realWidth,realHeight);
console.log(windowW,windowH);
var imgWidth, imgHeight;
// var scale = 1;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
// 图片尺寸小于屏幕尺寸
if(realWidth<=windowW){
// 图片高也小于屏幕高
if(realHeight<=windowH){
imgWidth=windowW;
imgHeight=realHeight/realWidth*windowW;
}else{
// 图片高大于屏幕高
imgHeight=windowH;
imgWidth=realWidth/realHeight*windowH;
}
}else{
// 宽超过屏幕宽，高不超过
if(realHeight<=windowH){
imgWidth=windowW;
imgHeight=windowW/realWidth*realHeight;
}else{
// 宽高都超过屏幕宽高
// 高大一些，按高来
if(realWidth/realHeight<=windowW/windowH){
imgHeight=windowH;
imgWidth=realWidth/realHeight*windowH;
}else{
// 宽大一些，按宽来
imgWidth=windowW;
imgHeight=windowW/realWidth*realHeight;
}
}
}
$(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放
var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
// 上下距离有误，图片并非垂直居中
var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
$(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
});
$(outerdiv).click(function(){//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
网友评论