图片查看器，点击小图查看原图。

最新推荐文章于 2021-06-24 13:32:08 发布

我最帅气257

最新推荐文章于 2021-06-24 13:32:08 发布

阅读量286

点赞数

本文链接：https://blog.csdn.net/weixin_56115652/article/details/117694421

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 图片的样式 */
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;## 
            width: 100%;
            text-align: center;
            margin-top: 40px;
            display: inline-block;
        }
        li img{
            width: 18%;
            height: 14%;
           cursor: pointer;
        }
        /* 添加一个遮罩的盒子 */
        ._img_div{
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0;
            background: rgba(0, 0, 0, .5);
            display: none;
        }
        /* 在页面中心添加一个图片盒子并使其居中 */
       .img_a{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: scale(0) translate(-50%,-50%);
            transition: transform .3s linear;
            transform-origin:0 0;
            z-index: 100;
            cursor: crosshair;
        }
    </style>
</head>
<body>
     <div class="img_">
         <ul>
             <li><img src="./img/01 (1).JPG" alt=""></li>
             <li><img src="./img/01 (2).JPG" alt=""></li>`
             <li><img src="./img/02.JPG" alt=""></li>
         </ul>
     </div>
     <div class="_img_div">
     </div>
     <img class="img_a" src="./img/02.JPG" alt="">
    <script >
        // 获取元素
      var Oul=document.querySelectorAll(".img_")[0];
      var z_img=document.querySelectorAll(".img_a")[0];
      var z_imgO=document.querySelectorAll("._img_div")[0];
        // 点击图片显示放大
         Oul.onclick=function(event){
            event.stopPropagation()  
             var src_= event.target.src;
             if(src_==undefined){
              return
             }
             z_img.src=src_;
             z_imgO.style.display="block";
             z_img.style.transform=" scale(1)  translate(-50%,-50%)";
         }
        //  点击遮罩放大图片消失    
         z_imgO.onclick=function(event){
             event.stopPropagation()
            z_imgO.style.display="none";
            z_img.style.transform=" scale(0)  translate(-50%,-50%)";
         }
        //  点击放大图片滚动轮放大
         z_img.onmousewheel=function(event){
             var n=1;
             var v=event.wheelDelta;
             if(v>0){
                 n++;
                 if(n>=5){
                     n=5
                 }
                 z_img.style.transform="scale("+n+") translate(-50%,-50%)"
             }else{
                n--;
                if(n<=0){
                    n=1;
                }
                z_img.style.transform="scale("+n+") translate(-50%,-50%)"
             }
             console.log(event.wheelDelta)
         }

    </script>
</body>
</html>