JS实现点击图片放大、关闭效果

实现效果:

点击图片在弹出层显示大图,点击大图或空白区域关闭大图,图片高度宽度根据窗口大小判断

html代码

<td width="350">
    <img class="pimg" height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId}" />
    <img class="pimg" height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId2}" />
    <img class="pimg" height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${fhFeed.feedImageId3}" />
td>

Js代码

 

——现在的努力,只为小时候吹过的牛逼! ——

Original: https://www.cnblogs.com/zxf100/p/14463311.html
Author: 下页、再停留
Title: JS实现点击图片放大、关闭效果

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/583386/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 视图层

    目录 虚拟环境 django路由层版本区别 视图函数返回值 JsonResponse对象 上传文件 request方法 FBV与CBV CBV源剖析 模板语法传值 内容 虚拟环境 …

    Linux 2023年6月7日
    073
  • Linux关于防火墙的命令

    Linux关于防火墙的命令 一、red hat/CentOs7关闭防火墙的命令 查看防火墙状态 systemctl status firewalld service iptable…

    Linux 2023年6月11日
    092
  • 【AutoSAR】 CP 和 AP

    概述 AutoSAR,全称为Automotive Open System Architecture(汽车开放系统架构)。是由全球各家汽车制造商、零部件供应商以及各种研究、服务机构共…

    Linux 2023年6月13日
    0121
  • linux 普通分区与lvm分区

    安装linux系统时 有时候会提示lvm分区与标准分区 首先普及一下lvm分区:lvm是 logical volume manager (逻辑卷管理),linux环境下对磁盘分区的…

    Linux 2023年6月14日
    091
  • Ubuntu常用命令

    Ubuntu(18.04)下更改用户名和主机名 更改主机名字: (1)修改hostname文件 这个文件中的内容是用来显示主机名的,修改这个文件后,立刻重启 (2)修改hosts文…

    Linux 2023年6月13日
    080
  • 15、16、17思维导图

    posted @2022-04-24 10:20 20191223张俊怡 阅读(31 ) 评论() 编辑 Original: https://www.cnblogs.com/zzj…

    Linux 2023年6月8日
    0135
  • 20 年老程序员告诉你的 20 条编码原则

    我从 1999 年就开始了编程生涯,到今年已经有 20 多年了。我先是从 Basic 开始,很快转到了 Pascal 和 C 语言,然后又学习了面向对象编程语言 Delphi 和 …

    Linux 2023年6月8日
    094
  • LinuxKernel(一)

    首先,回顾一下基础的宏操作: C语言宏 # 与 ## #的作用是字符串化:在一个宏中的参数前面使用一个#,预处理器会把这个参数转换为一个字符数组 #define ERROR_LOG…

    Linux 2023年6月8日
    0109
  • 统计算法_数值/线性关系度量

    继续统计算法,这次也没什么特别的,还没到那么深入,也是比较基础的1、方差-样本2、协方差(标准差)-样本3、变异系数4、相关系数 依然是先造个list,这次把这个功能写个函数,方便…

    Linux 2023年6月6日
    0144
  • linux bash 手册

    1、Linux shell简介 shell是一种特殊的交互式工具,包含了一组内部命令,这些命令可以完成复制文件,移动文件,显示和终止程序等操作。shell的核心是命令行提示符,它允…

    Linux 2023年6月7日
    080
  • Docker镜像管理基础

    Docker镜像管理基础 1、镜像的概念 镜像可以理解为应用程序的集装箱,而docker用来装卸集装箱。 docker镜像含有启动容器所需要的文件系统及其内容,因此,其用于创建并启…

    Linux 2023年6月7日
    0110
  • 闭包、装饰器

    闭包: 闭包的演变过程: 闭包的概念: “闭包”的本质就是函数的嵌套定义,即在函数内部再定义函数 “闭包”有两种不同的方式,第一种是…

    Linux 2023年6月8日
    078
  • C++类结构体与json相互转换

    1. 背景与需求 之前写C#的时候,解析json字符串一般使用的是开源的类库Newtonsoft.Json,方法十分简洁,比如: class Project { public st…

    Linux 2023年6月8日
    099
  • shell脚本

    1、什么是shell 什么是shell ? Shell(外壳) 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁。 Shell 既是一种命令语言, 又是一种程序设计语…

    Linux 2023年5月27日
    098
  • MySQL表空间回收的正确姿势

    不知道大家有没有遇到这样的一种情况,线上业务在MySQL表上做增删改查操作,随着时间的推移,表里面的数据越来越多,表数据文件越来越大,数据库占用的空间自然也逐渐增长 为了缩小磁盘上…

    Linux 2023年6月13日
    086
  • 打造一个红旗(redflag)Linux的基础镜像(base image)

    由于工作原因,想找一个红旗Linux的基础镜像(base image)。网上搜了一下,但没有现成的。起初是想找对应的centos版本来代替,但又怕有些莫名其妙的问题。 官方文档 不…

    Linux 2023年6月8日
    075
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球