AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
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: "<center><img src='" + $(this).attr("src") + "'></center>"});});});

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


Js获取图片原始宽高  
上一篇:简单的分页代码js实现  下一篇:创建一个类Person的简单实例