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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
js实现简单的验证码
Dec 25 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
创建一个类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 数组的一个悲剧?
2011/05/11 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
如何通过python计算圆周率PI
2020/11/11 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
主题酒店策划书
2014/01/28 职场文书
项目负责人任命书
2014/06/04 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
个人授权委托书范本
2014/09/14 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js