picZoomIn-52hz.js /** * Created by Administrator on 2016/10/19 0019. * 图片点击放大预览效果 */$(function(){ $(".itemImg").click(function(){ //创建全图预览的图片外层元素 var imgbox=" "; //创建关闭全图预览的图标
/**
* Created by Administrator on 2016/10/19 0019.
* 图片点击放大预览效果
*/
$(function(){
$(".itemImg").click(function(){
//创建全图预览的图片外层元素
var imgbox="
";
//创建关闭全图预览的图标
var cloIcon="";
$("body").append(imgbox);
$('.newImgBox').css({"zIndex":'100',"position":"fixed","width":"100%","height":"100%","top":"0","left":"0",
"border":"solid 2px mediumpurple","background":"rgba(0, 0, 0, 0.45)","box-shadow": "0px 0px 2px 5px white inset"});
var boxH = $('.newImgBox').css("height");//相框最大高度
var boxW = $('.newImgBox').css("width");//相框最大宽度
console.log("boxHeight:"+boxH+",boxWidth:"+boxW);
var theSrc=$(this).parent().parent().next().attr("src");//原始图片的图片路径
var theImage = new Image();//创建新图片对象
theImage.src = theSrc;//指定新图片对象的图片路径
var imageWidth = theImage.width;//原始图片的宽度
var imageHeight = theImage.height;//原始图片的高度
//如果原图图片宽高比大于一，则以宽为是否放大的标准。
if(imageWidth>imageHeight){
//如果原始尺寸大于屏幕尺寸 则适当的缩小图片
if(imageWidth>parseInt(boxW)||imageHeight>parseInt(boxH)){
//计算缩小图片需要的宽高比
var wbh=imageWidth/imageHeight;
var needwbh=wbh*(parseInt(boxH)/parseInt(boxW));
zoomInW=parseInt(boxW)*needwbh+"px";
zoomInH=parseInt(boxH)+"px";
}
else{
//放大后的图片尺寸--宽,如果放大后会超出屏幕的宽度，则保持原始图片宽度
if(imageWidth<=parseInt(boxW)/2){
zoomInW=imageWidth*2+"px";
zoomInH=imageHeight*2+"px";
}
else{
zoomInW=imageWidth+"px";
zoomInH=imageHeight+"px";
}
}
}
//如果图片宽高比小于一，则以高为是否放大的标准。
else{
//如果原始尺寸大于屏幕尺寸 则适当的缩小图片
if(imageWidth>parseInt(boxW)||imageHeight>parseInt(boxH)){
//计算缩小图片需要的宽高比
var wbh=imageWidth/imageHeight;
var needwbh=wbh*(parseInt(boxH)/parseInt(boxW));
zoomInW=parseInt(boxW)*needwbh+"px";
zoomInH=parseInt(boxH)+"px";
}
else{
if(imageHeight<=parseInt(boxH)/2){
zoomInH=imageHeight*2+"px";
zoomInW=imageWidth*2+"px";
}
else{
//放大后的图片尺寸--高，如果放大后会超出屏幕的高度，则保持原始图片高度
zoomInH=imageHeight+"px";
zoomInW=imageWidth+"px";
}
}
}
var imgWNum=parseInt(zoomInW)/2;//图片宽度数值一半
var imgHNum=parseInt(zoomInH)/2;//图片高度数值一半
var ml=-parseInt(zoomInW)/2;//用于水平居中的margin-left
var mt=-parseInt(zoomInH)/2;//用于垂直居中的margin-top
var cloIconL=(parseInt(boxW)/2+imgWNum-35)+"px";//关闭全图预览的图标的left
var cloIconT=(parseInt(boxH)/2-imgHNum+10)+"px";//关闭全图预览的图标的top
//说明：close图标的位置：top是屏幕高度的一半减去放大后的图片的高度的一半，再减去图标自身高度的一半。（left类似）
console.log("iconLeft:"+cloIconL+",iconTop:"+cloIconT);
console.log("w:"+imageWidth+",h:"+imageHeight);
console.log("neww:"+zoomInW+",newh:"+zoomInH);
console.log("margin-left:"+ml+",margin-top:"+mt);
$('.newImgBox').append(cloIcon);
$('.cloImgView').css({"zIndex":'1000',"width":"30px","height":"30px","borderRadius":"15px","position":"fixed","left":cloIconL,"top":cloIconT,"cursor":"pointer","background":"black","color":"white","fontSize":"20px"});
$(theImage).css({"zIndex":'100','width':zoomInW,'height':zoomInH,'position':'absolute','left':'50%','margin-left':ml,'top':'50%','margin-top':mt});
$('.cloImgView').click(function(){
$(this).parent().remove();
});
$('.newImgBox').append(theImage);
});
});
/**
*原始尺寸、增加图片循环翻页阅览
*/
zoomOutPic:function (srcs,currIdx) {
var imgLen = srcs.length,currIndex=currIdx,imageWidth,imageHeight,cloIconL,cloIconT,ml,mt;
//创建全图预览的图片外层元素
var imgbox="
";
//创建关闭全图预览的图标
var cloIcon="";
//创建前后翻页图标
var preIcon="";
var nextIcon="";
$("body").append(imgbox);
$('.newImgBox').css({"zIndex":'9999',"position":"fixed","width":"100%","height":"100%","top":"0","left":"0",
"border":"solid 1px transparent","background":"rgba(0, 0, 0, 0.45)","padding":'15px'});
var boxH = $('.newImgBox').css("height");//相框最大高度
var boxW = $('.newImgBox').css("width");//相框最大宽度
var theImage = new Image();//创建新图片对象
theImage.id = "WC_ZoomInOut_IMG";
theImage.src = srcs[currIndex].src;//指定新图片对象的图片路径
imageWidth = theImage.width;//原始图片的宽度
imageHeight = theImage.height;//原始图片的高度
cloIconL=(parseInt(boxW)-45)+"px";//关闭全图预览的图标的left
cloIconT=parseInt(5)+"px";//关闭全图预览的图标的top
ml = -imageWidth/2;
mt = -imageHeight/2;
console.log('w:',imageWidth,'h:',imageHeight);
$('.newImgBox').append(cloIcon);
$('.newImgBox').append(preIcon);
$('.newImgBox').append(nextIcon);
$('.cloImgView').css({"zIndex":'99991',"width":"40px","height":"40px","position":"fixed","left":cloIconL,"top":cloIconT,"cursor":"pointer","color":"white"});
$('.preIcon').css({"zIndex":'99991',"width":"30px","height":"30px","border":"solid 2px #fff","position":"fixed","left":"2%","top":"50%","marginTop":"-15px","cursor":"pointer","color":"white"});
$('.nextIcon').css({"zIndex":'99991',"width":"30px","height":"30px","border":"solid 2px #fff","position":"fixed","right":"2%","top":"50%","marginTop":"-15px","cursor":"pointer","color":"white"});
$(theImage).css({"zIndex":'9999','width':imageWidth+'px','height':imageHeight+'px','position':'absolute','left':'50%','margin-left':ml,'top':'50%','margin-top':mt});
$('.newImgBox').append(theImage);
/**
* 关闭图片
*/
$('.cloImgView').click(function(){
$("#WC_ZoomInOut_IMG").remove();
$('.newImgBox').remove();
});
/**
* 向前翻页
*/
$("#WC_preIcon").on("click",function () {
$("#WC_ZoomInOut_IMG").remove();
currIndex = currIndex-1>=0?currIndex-1:imgLen-1;
console.log(currIndex)
var theImage = new Image();//创建新图片对象
theImage.id = "WC_ZoomInOut_IMG";
theImage.src = srcs[currIndex].src;//指定新图片对象的图片路径
imageWidth = theImage.width;//原始图片的宽度
imageHeight = theImage.height;//原始图片的高度
cloIconL=(parseInt(boxW)-45)+"px";//关闭全图预览的图标的left
cloIconT=parseInt(5)+"px";//关闭全图预览的图标的top
ml = -imageWidth/2;
mt = -imageHeight/2;
$(theImage).css({"zIndex":'9999','width':imageWidth+'px','height':imageHeight+'px','position':'absolute','left':'50%','margin-left':ml,'top':'50%','margin-top':mt});
$('.newImgBox').append(theImage);
})
/**
* 向后翻页
*/
$("#WC_nextIcon").on("click",function () {
$("#WC_ZoomInOut_IMG").remove();
currIndex = currIndex+1<=imgLen-1?currIndex+1:0;
console.log(currIndex)
var theImage = new Image();//创建新图片对象
theImage.id = "WC_ZoomInOut_IMG";
theImage.src = srcs[currIndex].src;//指定新图片对象的图片路径
imageWidth = theImage.width;//原始图片的宽度
imageHeight = theImage.height;//原始图片的高度
cloIconL=(parseInt(boxW)-45)+"px";//关闭全图预览的图标的left
cloIconT=parseInt(5)+"px";//关闭全图预览的图标的top
ml = -imageWidth/2;
mt = -imageHeight/2;
$(theImage).css({"zIndex":'9999','width':imageWidth+'px','height':imageHeight+'px','position':'absolute','left':'50%','margin-left':ml,'top':'50%','margin-top':mt});
$('.newImgBox').append(theImage);
})
}