Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图，那就需要做个图片点击放大效果，那么怎样获取图片的原始宽高呢？方法如下：
//获取图片原始宽度
functiongetNaturalWidthAndHeight(img){
varimage=newImage();
image.src=img.src;
return[image.width,image.height];
}
//点击缩略图弹出层，显示原始图片。
//获取class为tz_main_box下的所有p标签下的图片img
$(".tz_main_boxp>img").each(function(k,v){
$(this).unbind("click");//解除绑定，防止弹出多次图片层。
$(this).click(function(){
varimg=v;//图片对象
varimgArea=getNaturalWidthAndHeight(img);
varlayerWidth=imgArea[0]+5;
if(layerWidth>1080){
layerWidth=1080;
}
varlayerHeight=imgArea[1]+5;
if(layerHeight>600){
layerHeight=600;
}
//layer弹出层插件
layer.open({
type:1,
title:false,
closeBtn:0,
area:[''+layerWidth+'px',''+layerHeight+'px'],
skin:'layui-layer-nobg',//没有背景色
shadeClose:true,
closeBtn:1,//显示关闭按钮
content:"<center><imgsrc='"+$(this).attr("src")+"'></center>"
});
});
});
以上这篇Js获取图片原始宽高的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。