您现在的位置是:首页 > 正文

H5图片点击放大 最新发布

2024-01-30 19:36:45阅读 5

一个简单的HTML5和JavaScript代码来实现点击图片放大效果。以下是示例代码:

<!DOCTYPE html>
<html>
<head>
  <title>点击图片放大效果</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.9);
    }
    .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
    }
    .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>点击图片放大效果</h2>
  <img id="myImg" src="your_image.jpg" alt="Your Image" style="width:100%;max-width:300px">
  <div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
  </div>
  <script>
    var modal = document.getElementById("myModal");
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");
    img.onclick = function() {
      modal.style.display = "block";
      modalImg.src = this.src;
    };
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() {
      modal.style.display = "none";
    };
  </script>
</body>
</html>

请将your_image.jpg替换为您要展示的图片的路径。这段代码创建了一个模态框(Modal),当用户点击图片时,模态框会出现并将图片放大显示。用户可以点击模态框右上角的关闭按钮来关闭模态框。

网站文章

  • Java笔记--基于注解的DI 之 @Component和@Value--2021-08-14

    基于注解的DI 之 @Component和@Value一、@Component二、@Value 一、@Component @Component 创建对象的,等同于的功能 属性:value 就是对象的名...

    2024-01-30 19:36:38
  • Word宏病毒

    Word宏病毒

    Word宏病毒【实验目的】1、演示宏的编写。2、说明宏的原理及其安全漏洞和缺陷。3、理解宏病毒的作用机制,从而加强对宏病毒的认识,提高防范意识。【实验环境】在windows虚拟机中演示word宏病毒的...

    2024-01-30 19:36:33
  • react-umi-dva的使用

    用这个玩意,最起码了解react-redux 和 redux相关的东西,不然有点懵逼 开启 @umijs/plugin-dva 引入相关配置信息报错,需要新件models / index 并且暴露出去...

    2024-01-30 19:36:05
  • 【数据结构与算法】插值查找算法、斐波那契查找算法(黄金分割法)的介绍和程序实现

    【数据结构与算法】插值查找算法、斐波那契查找算法(黄金分割法)的介绍和程序实现

    插值查找算法类似二分查找算法。二分查找算法的mid取值为mid=low+high2=low+12(high−low)mid=2low+high​=low+21​(high−low)而插值查找算法,并不是取low和high中间的index,而是根据findValue的值的大小来确定mid,findValue值偏大,则mid偏大,findValue值偏小,则mid偏小,这样能缩小查找的范围。

    2024-01-30 19:35:58
  • Mac帆软生成docker镜像

    Mac帆软生成docker镜像

    2024-01-30 19:35:53
  • CentOS7安装MySQL

    CentOS7安装MySQL

    MySQL的下载地址:https://dev.mysql.com/downloads/mysql/1.由于企业版的要收费,这里就下载社区版的MySQL1-1.按红圈的下载2.下载完成后,上传到服务器[root@node1 ~]# rz #上传文件[root@node1 ~]# ls ...

    2024-01-30 19:35:26
  • Set对象

    Set对象

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects 可查看网站 Set对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。 set对象中有很多的方法 1、Set.prototype.add() add()方法用来向一个Set对象的末尾添加一个指定的值。 var...

    2024-01-30 19:35:20
  • APK调试

    APK调试

    源码的情况下,对APK的动态调试主要分为两种:smali汇编动态调试arm汇编动态调试Smali汇编动态调试对smali汇编的动态调试主要分为两种:使用ida进行调试使用IDE + apktool进行调试Eclipse + apktoolAndroid studio + apktoolIdea + apktool…使用jeb2.2以后版本调试IDA 调试smali...

    2024-01-30 19:35:13
  • 使用SourceMonitor完成静态测试

    使用SourceMonitor完成静态测试

    摘要:软件测试作为软件开发中的重要环节,其重要程度不言而喻,从需求定制到软件交付,不仅要保证软件在功能上的要求,同时也要满足性能需求。毕竟,客户体验才是软件赖以生存的基石。本篇文章主要讲述了如何使用SourceMonitor这款软件完成最基本的静态测试,整个流程比较简单。一、软件安装由于本次实验是基于SourceMonitor这款软件完成的,所以需要先下载相应的安装包,网上搜...

    2024-01-30 19:35:05
  • 南艺附中 计算机音乐,南京艺术学院2018年音乐类本科招生考试科目及内容

    南京艺术学院2018年音乐类本科招生考试科目及内容考试科目及内容招生专业及方向考试科目、内容音乐表演(声乐演唱)初试:①演唱(自选歌曲1首)②面试复试:①演唱(自选歌曲2首,曲目不同于初试)②基本乐理...

    2024-01-30 19:34:38