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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
webpack之devtool详解
Feb 10 Javascript
Vue实现菜单切换功能
Nov 08 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
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python动态监控日志内容的示例
2014/02/16 Python
python检测服务器是否正常
2014/02/16 Python
Python计算程序运行时间的方法
2014/12/13 Python
Python socket编程实例详解
2015/05/27 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
详解python metaclass(元类)
2020/08/13 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
出纳工作岗位责任制
2014/02/02 职场文书
行政人事岗位职责
2014/03/17 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python