＜img＞标签的onclick用js完成放大缩小（挺香的）

最新推荐文章于 2024-10-14 00:57:11 发布

WangTYu0829

最新推荐文章于 2024-10-14 00:57:11 发布

阅读量1.4k

点赞数

文章标签： js html css

本文链接：https://blog.csdn.net/qq_39174716/article/details/108509985

版权

直接上代码（复制可用）

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点击图片试试</title>
  <style>

    .show-img-bg{
        display: flex;
        align-items: center;
        position:fixed;
        top:0;
        left:0;
        background:rgba(0,0,0,0.7);
        z-index:2;
        width:100%;
        height:100%;
    }
    .bg-title{
        position: absolute;
        right: 20px;
        color: red;
        z-index: 99;
    }
    .lar-img{
        display: block;
        margin: 0 auto;
        z-index: 3;
        width:800px;
        height: auto;
        cursor: pointer;
        border:2px solid #fff;
    }
    .close-icon{
        position: absolute;
        top: 0;
        right: 0;
        color: #000000;
        background-color: #fff;
        font-size: 20px;
        font-weight: bold;
        padding: 8px 16px;
        border: #fff 1px solid;
    }
    .download-btn{
        position: absolute;
        right: 50px;
        bottom: 100px;
        padding: 8px 24px;
        color: #000000;
    }
    .ori-btn{
        position: absolute;
        right: 50px;
        bottom: 160px;
        padding: 8px 24px;
        color: #000000;
    }

  </style>
 </head>
 <body>
   <img src="https://img-blog.csdnimg.cn/20200410144904804.png" style="padding:5px;width:200px;height:auto;cursor: pointer;border: 2px solid red;" title="点击图片放大" onclick="expandPhoto(this);"/>
 </body>
 <script>
  function expandPhoto(obj){
      var _this = obj;
      var bg = document.createElement("div"); //创建div
      bg.setAttribute("id","showImgBg");  //给背景添加id
      bg.setAttribute("class","show-img-bg");  //给背景添加class
      document.body.appendChild(bg);  //向页面中显示此div，背景覆盖整个页面（展示台）
      const bgId = document.getElementById("showImgBg");//声明背景id
  
      var title = document.createElement("span");
      title.setAttribute("class","bg-title");
      title.innerHTML = "双击图片可放大缩小，按键部分可用";
      bgId.appendChild(title);//加入小提示
      
      var larimg = document.createElement("img");
      larimg.setAttribute("id","larImg");
      larimg.setAttribute("class","lar-img");
      larimg.src = _this.getAttribute("src");
      bgId.appendChild(larimg);//加入展示的图片
  
      var close = document.createElement("span");
      close.setAttribute("id","closeIcon");
      close.setAttribute("class","close-icon");
      close.innerHTML = "x";
      bgId.appendChild(close);//加入手写的关闭按钮
      
      var downloadBtn = document.createElement("input");
      downloadBtn.setAttribute("type","button");
      downloadBtn.setAttribute("class","download-btn");
      downloadBtn.setAttribute("id","downloadBtn");
      downloadBtn.setAttribute("value","下载");
      bgId.appendChild(downloadBtn);//加入下载按钮
  
      var oriBtn = document.createElement("input");
      oriBtn.setAttribute("type","button");
      oriBtn.setAttribute("class","ori-btn");
      oriBtn.setAttribute("id","oriBtn");
      oriBtn.setAttribute("value","还原");
      bgId.appendChild(oriBtn);//加入还原按钮
  
      larimg.onclick = bigImg;//点击放大缩小按钮
      oriBtn.onclick = oriImg;//点击还原图片
      downloadBtn.onclick = download;//点击下载图片
      close.onclick = restore;//关闭展示的页面
  }
  
  function restore(){
      document.body.removeChild(document.getElementById("showImgBg"));
  }
  
  function bigImg(){
      let lar = document.getElementById("larImg");
      if(lar.style.width == '800px'){
        lar.style.width = "1200px";
      }else{
        lar.style.width = "800px";
      }
  }
  
  function oriImg(){
      let lar = document.getElementById("larImg");
      lar.style.width = "800px";
  }
  
  function download(){
    alert("下不了的，别点了");
  }
  
  </script>
 
</html>