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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
怎么清空javascript数组
May 11 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 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
我的论坛源代码(二)
2006/10/09 PHP
php里array_work用法实例分析
2015/07/13 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
javascript 中__proto__和prototype详解
2014/11/25 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
python sort、sorted高级排序技巧
2014/11/21 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
给幼儿园老师的表扬信
2014/01/19 职场文书
中学家长会邀请函
2014/02/03 职场文书
医学生求职信
2014/07/01 职场文书
敬老月活动总结
2014/08/28 职场文书
2015年司机工作总结
2015/04/23 职场文书
找规律教学反思
2016/02/23 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL