手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Js获取图片原始宽高的实现代码
Js获取图片原始宽高的实现代码
摘要:如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下://获取图片原始宽度function...

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

//获取图片原始宽度 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: "<center><img src='" + $(this).attr("src") + "'></center>" }); }); });

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

【Js获取图片原始宽高的实现代码】相关文章:

JS函数实现鼠标指向图片后显示大图代码

js实现异步循环实现代码

js+html5绘制图片到canvas的方法

Javascript特效:随机显示图片的源代码

精彩图片推荐 渐隐渐现

获得当前页面URL地址的三个JS代码

图片加载进度实时显示

JavaScript模版引擎的基本实现方法浅析

获取阴历(农历)和当前日期的js代码

js获取变量

精品推荐
分类导航