Js获取图片原始宽高的实现代码
更新时间：2016年05月17日 16:00:29 投稿：jingxian
下面小编就为大家带来一篇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获取图片原始宽高的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS正则表达式之非捕获分组用法,结合实例形式详细分析了正则表达式中非捕获分组的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了JavaScript实现PC端四格密码输入框功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02![编写跨浏览器的javascript代码必备[js多浏览器兼容写法]](//img.jbzj.com/images/xgimg/bcimg2.png)
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
下面比较了几种浏览器之间的差异，在写javascript代码时 要时刻注意这些差异2008-10-10
JavaScript中for与forEach分别如何跳出循环
forEach的优势一个是它的回调函数形成了一个作用域,它的curItem和i不会像for循环一样污染全局变量,这篇文章主要给大家介绍了关于JavaScript中for与forEach分别如何跳出循环的相关资料,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了在JavaScript中运行.NET Core代码详情，DotNetJS可以将C#项目编译为与任何环境兼容的单文件JavaScript库，变可以在JavaScript中运行.NET Core代码，相关操作分享详情，需要的小伙伴可以参考一下2022-04-04
本章主要介绍通过JavaScript读取图片的例子，本例子不包含服务器端后台代码，只包含前台页面代码，所以直接用Html文件就可以，代码如下，因为包含详细的注意，所以不再详细说明了，如果有看不明白的，可以给我留言，我给大家具体答复。2009-11-11
这篇文章主要为大家详细介绍了js回调函数仿360开机，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
5秒后跳转效果(setInterval/SetTimeOut)
实现5秒后自动跳转效果有两种方式setInterval与SetTimeOut，具体实现如下，感兴趣的朋友可以参考下2013-05-05
下面小编就为大家带来一篇json对象与数组以及转换成js对象的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
![编写跨浏览器的javascript代码必备[js多浏览器兼容写法]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论