糖尿病康复,内容丰富有趣,生活中的好帮手!
糖尿病康复 > php根据图片地址获取图片原始高宽 Js获取图片原始宽高的实现代码

php根据图片地址获取图片原始高宽 Js获取图片原始宽高的实现代码

时间:2021-01-25 21:19:22

相关推荐

php根据图片地址获取图片原始高宽 Js获取图片原始宽高的实现代码

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

//获取图片原始宽度

function getNaturalWidthAndHeight(img) {

var image = new Image();

image.src = img.src;

return [image.width,image.height];

}

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

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

如果觉得《php根据图片地址获取图片原始高宽 Js获取图片原始宽高的实现代码》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。