js简易放大缩小img

参考https://blog.csdn.net/qq_39174716/article/details/108509985
<img src='' name='' class='mxpic' onclick = 'expandPhoto(this)'/>

<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;
 }
 .big-btn{
  position: absolute;
  right: 0;
  bottom: 160px;
  padding: 8px 24px;
  color: #000000;
 }

 .small-btn{
  position: absolute;
  right: 0;
  bottom: 100px;
  padding: 8px 24px;
  color: #000000;
 }

</style>

<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.style.width = "500px";
   larimg.style.height = "200px";



   larimg.src = _this.getAttribute("src");
   bgId.appendChild(larimg);//加入展示的图片


   var smallBtn = document.createElement("input");
   smallBtn.setAttribute("type","button");
   smallBtn.setAttribute("class","small-btn");
   smallBtn.setAttribute("id","smallBtn");
   smallBtn.setAttribute("value","缩小");
   bgId.appendChild(smallBtn);

   var bigBtn = document.createElement("input");
   bigBtn.setAttribute("type","button");
   bigBtn.setAttribute("class","big-btn");
   bigBtn.setAttribute("id","bigBtn");
   bigBtn.setAttribute("value","放大");
   bgId.appendChild(bigBtn);//


   var close = document.createElement("span");
   close.setAttribute("id","closeIcon");
   close.setAttribute("class","close-icon");
   close.innerHTML = "x";
   bgId.appendChild(close);//加入手写的关闭按钮

   larimg.onclick = bigImg;//点击放大缩小按钮
   bigBtn.onclick = bigImg;//点击放大缩小按钮
   smallBtn.onclick = smallImg;//点击放大缩小按钮
   close.onclick = restore;//关闭展示的页面
}

function restore(){
   document.body.removeChild(document.getElementById("showImgBg"));
}
function bigImg(){
   let lar = document.getElementById("larImg");
   let width = lar.style.width;
   let height = lar.style.height;

   if(parseInt(width) < 1300){
      let widthNew = parseInt(width) + parseInt(200);
      let heightNew = parseInt(height) + parseInt(100);
      // alert("widthNew="+widthNew)
      lar.style.width = widthNew +"px";
      lar.style.height = heightNew +"px";
   }
}

function smallImg(){
   let lar = document.getElementById("larImg");
   let width = lar.style.width;
   let height = lar.style.height;

   if(parseInt(width) > 200){
      let widthNew = parseInt(width) - parseInt(200);
      let heightNew = parseInt(height) - parseInt(100);
      lar.style.width = widthNew +"px";
      lar.style.height = heightNew +"px";
   }
}

function oriImg(){
   let lar = document.getElementById("larImg");
   lar.style.width = "800px";
}

</script>