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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
JavaScript分页组件使用方法详解
Jul 26 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php5数字型字符串加解密代码
2008/04/24 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
培训主管岗位职责
2014/02/01 职场文书
婚宴新郎致辞
2015/07/28 职场文书
《包身工》教学反思
2016/02/23 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
css弧边选项卡的项目实践
2023/05/07 HTML / CSS