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获取图片原始宽高的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。