js實現圖片放大展示效果，js實現放大展示

最後更新：2017-09-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

圖片放大展示效果的實現代碼，可動態產生圖片，每次點擊看原圖的時候為當前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可動態產生多個 -->      <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; //當前點擊圖片的父元素        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");              }      })      　　　　　　　　　　//左點擊事件，當圖片為第一張的時候左邊的箭頭點擊圖片隱藏      $(".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);          }           }      })      　　　　　　　　　//右點擊事件， 當圖片為最後一張的時候右邊箭頭點擊圖片隱藏      $(".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>

< 向左點擊事件

> 向右點擊事件

第一張

中間圖片

最後一張

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More