js實現(xiàn)圖片放大展示效果

2019-11-19 15:36:11

字體：大中小

供稿：網(wǎng)友

圖片放大展示效果的實現(xiàn)代碼，可動態(tài)生成圖片，每次點擊看原圖的時候為當(dāng)前id里面的圖片

HTML

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <script src="node_modules/jquery/jquery.js"></script>    <style>      *{        margin: 0;        padding: 0;      }      #picOne img{        width: 200px;        height: 200px;      }      .mask-img {        display: none;         position: fixed;         top: 0;         left: 0;         width: 100%;         height: 100%;         z-index: 10;         background: rgba(0,0,0,.2);      }            .picture{        display: none;         position: fixed;         top: 50%; left:50%;         transform: translate(-50%,-50%);         width: 960px;         height: 700px;         line-height: 700px;         text-align:center;         background: #666;         z-index: 20;      }      .picture .phone{        vertical-align: middle;         max-width: 868px;         max-height: 670px;       }      .picture .left{        position: absolute;         left: 10px;         top: 320px;         width: 25px;         height: 40px;         line-height: 40px;      }      .picture .right{        position: absolute;         right: 10px;         top: 320px;         width: 25px;         height: 40px;         line-height: 40px;      }    </style>  </head>  <body>    <div class="seaImg">  <!-- seaImg可動態(tài)生成多個 -->      <div id="picOne">　　　        <img src="img/img2.jpg">         <img src="img/img3.jpg">        <img src="img/img1.jpg">       </div>     </div>    <!--  遮罩層 -->    <div class="mask-img"></div>    <div class="picture">      <img class="phone" src="" alt="" />      <div class="left"><img src="img/left.png" alt="" /></div>      <div class="right"><img src="img/right.png" alt="" /></div>    </div>  </body>  <script>    function seaImg(){      $(".mask-img").on("click",function(e){        $(".mask-img").css("display","none");        $(".picture").css("display","none");            })      var imgs = $('.seaImg img')      var images;      imgs.on('click',function(e){        var father = (e.currentTarget).parentNode; //當(dāng)前點擊圖片的父元素        var att = father.attributes.id.nodeValue; //父元素自己的屬性id        var image = '#' + att + ' img'        images = $(image)  //jquer獲取id下的所有img        $(".mask-img").css("display","block");        $(".picture").css("display","block");             $(".phone").attr("src",e.currentTarget.src);        if(e.currentTarget == images[0]){          $(".left").css("display","none");        }else{          $(".left").css("display","block");        }              if(e.currentTarget == images[images.length-1]){          $(".right").css("display","none");               }else{          $(".right").css("display","block");              }      })      　　　　　　　　　　//左點擊事件，當(dāng)圖片為第一張的時候左邊的箭頭點擊圖片隱藏      $(".left").on("click",function(){         var imgSrc = $(".phone").attr("src");        $(".right").css("display","block");            for(var i = 0 ; i<images.length; i++){             if(imgSrc == images[i].src){            if(imgSrc == images[1].src){              $(".left").css("display","none");            }            var j = i;            $(".phone").attr("src",images[j-1].src);          }           }      })      　　　　　　　　　//右點擊事件， 當(dāng)圖片為最后一張的時候右邊箭頭點擊圖片隱藏      $(".right").on("click",function(){        var imgSrc = $(".phone").attr("src");        $(".left").css("display","block");             for(var i = 0 ; i<images.length; i++){                 if(imgSrc == images[i].src){            if(imgSrc == imgs[images.length-2].src){              $(".right").css("display","none");            }            var j = i;            $(".phone").attr("src",images[j+1].src);          }        }      })           }     seaImg()  </script></html>

< 向左點擊事件

> 向右點擊事件

第一張效果圖