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


Posted in Javascript onMay 17, 2016

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

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

Javascript 相关文章推荐
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
jquery 模板的应用示例
Nov 12 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
JavaScript文档对象模型DOM
Nov 20 Javascript
创建一个类Person的简单实例
May 17 #Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 #Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 #Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 #Javascript
Winform客户端向web地址传参接收参数的方法
May 17 #Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 #Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 #Javascript
You might like
php简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
python 实现归并排序算法
2012/06/05 Python
Python中的exec、eval使用实例
2014/09/23 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python next()和iter()函数原理解析
2020/02/07 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
COS美国官网:知名服装品牌
2019/04/08 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
简历的自我评价
2014/02/03 职场文书
绩效工资实施方案
2014/03/15 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2014年民政工作总结
2014/11/26 职场文书
论文答谢词
2015/01/20 职场文书
openstack云计算keystone组件工作介绍
2022/04/20 Servers
在python中读取和写入CSV文件详情
2022/06/28 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL