Js获取图片原始宽高的实现代码
作者：jingxian 发布时间：2024-11-16 18:48:31
标签：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>"
});
});
});
0
投稿猜你喜欢
以前写过《 10条影响CSS渲染速度的写法与建议》，今天放些数据出来，供参考；首先说明一点，CSS对网页的最后渲染出来的速度影响非- 1. 切片不执行越界检查和报错下面代码的输出结果将是什么？list = ['a', 'b', 'c&
- 前言参考文章：Python实现照片卡通化我继续魔改一下，让该模型可以支持将gif动图或者视频，也做成卡通化效果。毕竟一张图可以那就带边视频也
- 本文实例讲述了python集合用法。分享给大家供大家参考。具体分析如下：# sets are unordered collections o
- 一、什么是数据类型其实可以明白数据类型指的就是变量值的不同类型，姓名可能是一种数据类型、年龄可能是一种数据类型、爱好可能又是另一种数据类型二
- 1、建表语句：CREATE TABLE `employees` ( `emp_no` int(11) NOT NULL, `birth_da
- 安装 Tesseract OCRTesseract OCR 是一款由 Google 团队开发的开源 OCR（Optical Characte
- 学习了Go语言后,打算利用最近比较空一点,写一个前端部署工具,不需要每次都复制粘贴的麻烦,需要完成部署的第一步就需要连接远程服务器打开 ss
- 在同一窗口浏览图片的方法有很多，本例要为大家介绍的是使用js获取img的src属性后进行替换，有此需要的朋友可以参考下 <
- With语句是什么？有一些任务，可能事先需要设置，事后做清理工作。对于这种场景，Python的with语句提供了一种非常方便的处理方式。一个
- 如IE6,在他上面还不那么富饶，给程序调试带来的很大的痛苦啊，所以日志即时输出是一个不错的选择，可以知道程序覆盖到了哪里。即是在先进的浏览器
- 语音识别工作原理简介语音识别源于 20 世纪 50 年代早期在贝尔实验室所做的研究。早期语音识别系统仅能识别单个讲话者以及只有约十几个单词的
- 1.创建一个项目django-admin.py startproject HelloWorld2.进入HelloWorld项目,在manag
- file_get_contents的超时处理话说，从PHP5开始，file_get_content已经支持context了（手册上写着：5.
- 本文实例讲述了js实现向右横向滑出的二级菜单效果。分享给大家供大家参考。具体如下：这是一个网页上的横向滑出二级菜单，菜单是竖向排列的，但二级
- 最近在Ubuntu16.04上安装Python3.6之后，使用pip命令出现了问题，提示说找不到ssl模块，出现错误如下：pip is co
- 1.在Scrapy工程下新建“middlewares.py”# Importing base64 library because we
- 前言最近使用Python解析IDX文件格式的MNIST数据集，需要对二进制文件进行读取操作，其中我使用的是struct模块。查了网上挺多教程
- 嗯，开场先胡扯几句不相关地感言。最近的工作让我有了很多实践的机会，同时也让我收获颇丰。在群里聊天的时候也提到过，所有的学习过程，最好是理论－
- 因此,我们主要解决的思路是效验session ID的有效性. 以下为引用的内容： <?php if(!isset($_SESSION[
