Js获取图片原始宽高的实现代码

前端之家收集整理的这篇文章主要介绍了Js获取图片原始宽高的实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下:

//点击缩略图弹出层,显示原始图片。

//获取class为tz_main_box下的所有p标签下的图片img
$(".tz_main_box p>img").each(function (k,v) {
$(this).unbind("click"); //解除绑定,防止弹出多次图片层。
$(this).click(function () {
var img = v; //图片对象
var imgArea = getNaturalWidthAndHeight(img);
var layerWidth = imgArea[0]+ 5;
if (layerWidth > 1080) {
layerWidth = 1080;
}
var layerHeight = 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: "

"
});
});
});

以上这篇Js获取图片原始宽高的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/48697.html

猜你在找的JavaScript相关文章