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

 更新时间:2016年05月17日 16:00:29   投稿:jingxian  
下面小编就为大家带来一篇Js获取图片原始宽高的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧

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

//获取图片原始宽度
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中的函数模式详解

    这篇文章主要介绍了JavaScript中的函数模式详解,本文讲解了创建函数的语法、函数表达式、命名函数表达式、函数的声明、函数声明与表达式、函数的提升、即时函数模式等内容,需要的朋友可以参考下
    2015-02-02
  • javascript格式化指定日期对象的方法

    javascript格式化指定日期对象的方法

    这篇文章主要介绍了javascript格式化指定日期对象的方法,涉及javascript针对日期对象操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • Swiper自定义分页器使用详解

    Swiper自定义分页器使用详解

    这篇文章主要为大家详细介绍了Swiper自定义分页器的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 通俗易懂讲解Json Web Token (JWT)

    通俗易懂讲解Json Web Token (JWT)

    这篇文章主要介绍了通俗易懂讲解Json Web Token (JWT)问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 一个JavaScript防止表单重复提交的实例

    一个JavaScript防止表单重复提交的实例

    防止重复表单提交的方法有很多,本文使用JavaScript来实现防止表单重复提交,很简单,但很实用,新手朋友们不要错过
    2014-10-10
  • 理解JavaScript变量作用域更轻松

    理解JavaScript变量作用域更轻松

    变量作用域是每门编程语言都会涉及的话题,也是作为一名程序员必需掌握的知识点,能深入掌握变量作用域更有助于你编写稳定的程序。
    2009-10-10
  • 人人网javascript面试题 可以提前实现下

    人人网javascript面试题 可以提前实现下

    JavaScript面试题要求:以下题目必须从一至四题中,选出三道题,使用原生代码实现,不可使用任何框架,第五题为选作题
    2012-01-01
  • 使用mini-define实现前端代码的模块化管理

    使用mini-define实现前端代码的模块化管理

    这篇文章主要介绍了使用mini-define实现前端代码的模块化管理,十分不错的一篇文章,这里推荐给有需要的小伙伴。
    2014-12-12
  • 网页加载时页面显示进度条加载完成之后显示网页内容

    网页加载时页面显示进度条加载完成之后显示网页内容

    网页加载时页面显示进度条(加载完成时显示网页内容),这种效果在浏览网页很常见,本文也介绍一种实现方法,需要了解的朋友可以参考下
    2012-12-12
  • layui多图上传实现删除功能的例子

    layui多图上传实现删除功能的例子

    今天小编就为大家分享一篇layui多图上传实现删除功能的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论