如何使用js制作淘寶放大鏡效果-創(chuàng)新互聯(lián)

小編給大家分享一下如何使用js制作淘寶放大鏡效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

鹽津網(wǎng)站建設公司成都創(chuàng)新互聯(lián)公司,鹽津網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經驗。已為鹽津近1000家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿營銷網(wǎng)站建設要多少錢，請找那個售后服務好的鹽津做網(wǎng)站的公司定做！

具體內容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      img{
        width: 100%;
        height: 100%;
      }
      #content{
        width: auto;
        height: auto;
        margin-left: 200px;
        margin-top: 60px;
      }
      #content-left{
        position: relative;
        width: 420px;
        height: auto;
        float: left;
      }
      #middle{
        border: 1px solid #d2d2d2;
        width: 418px;
        height: 418px;
      }
      #small{
        width: 420px;
        height: auto;
      }
      #glass{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
        top: 0;
        opacity: 0.5;
        z-index: 1;
        display: none;
      }
      ul{
        width: inherit;
        height: 60px;
      }
      ul li{
        display: inline;
        height: 60px;
        list-style: none;
        float: left;
        margin: 10px;
      }
      #content-right{
        position: relative;
        width: 418px;
        height: 418px;
        border: 1px solid #ccc;
        float: left;
        margin-left: 10px;
        overflow: hidden;
        display: none;
      }
      #content-right img{
        position: absolute;
        width: 836px;
        height: 836px;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div id="content-left">
        <div id="middle">
          <div id="glass"></div>
          <img src="img/01.jpg"/>
        </div>
        <div id="small">
          <ul>
            <li><img src="img/1.jpg"/></li>
            <li><img src="img/2.jpg"/></li>
            <li><img src="img/3.jpg"/></li>
            <li><img src="img/4.jpg"/></li>
            <li><img src="img/5.jpg"/></li>
          </ul>
        </div>
      </div>
      <div id="content-right">
        <img src="img/001.jpg"/>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var smallLi = document.getElementById("small").getElementsByTagName("ul")[0].getElementsByTagName("li");
    var middle = document.getElementById("middle")
    var middleImg = middle.getElementsByTagName("img")[0]
    var contentRight = document.getElementById("content-right");
    var bigImg = contentRight.getElementsByTagName("img")[0]
    var glass = document.getElementById("glass");
    //獲取放大鏡大小
    var bigImgWidth = getStyle(bigImg,"width");
    var bigImgHeight = getStyle(bigImg,"height");
    var contentRightWidth = getStyle(contentRight,"width");
    var contentRightHeight = getStyle(contentRight,"height");
    var middleWidth = getStyle(middle,"width");
    var middleHeight = getStyle(middle,"height");
    var glassWidth = contentRightWidth/bigImgWidth*middleWidth;
    var glassHeight = contentRightHeight/bigImgHeight*middleHeight;
    var middleBorder = getStyle(middle,"border")
    glass.style.width = glassWidth + "px";
    glass.style.height = glassHeight + "px";
    for(var i =0;i<smallLi.length;i++){
      (function(index){
        smallLi[i].onmouseover = function(){
          middleImg.src = "img/0"+index+".jpg";
          bigImg.src = "img/00"+index+".jpg"
        }
      })((i+1));
    }
    middle.onmouseover = function(){
      contentRight.style.display = "block"
      glass.style.display = "block"
      middle.onmousemove = function(ev){
        var evt = ev||event
        var x = evt.x - content.offsetLeft -glass.offsetWidth/2 + window.scrollX - middleBorder
        var y = evt.y - content.offsetTop - glass.offsetHeight/2 + window.scrollY - middleBorder
        if(x<=middleBorder){
          x = middleBorder;
        }
        if(x>=middle.offsetWidth-glass.offsetWidth-middleBorder){
          x = middle.offsetWidth - glass.offsetWidth -middleBorder;
        }
        if(y<=middleBorder){
          y = middleBorder;
        }
        if(y>=middle.offsetHeight-glass.offsetHeight-middleBorder){
          y = middle.offsetHeight - glass.offsetHeight - middleBorder;
        }
        glass.style.left = x + "px"
        glass.style.top = y + "px"
        bigImg.style.left = -x*middleWidth/glassWidth + middleBorder*2 + "px"
        bigImg.style.top = -y*middleHeight/glassHeight + middleBorder*2 + "px"
        console.log(x)
        console.log(x*middleWidth/glassWidth)
      }
      middle.onmouseout = function(){
        contentRight.style.display = "none";
        glass.style.display = "none";
      }
    }
    function getStyle(obj,attr){//獲取css屬性
      return (obj.currentStyle)?parseInt(obj.currentStyle[attr]):parseInt(getComputedStyle(obj,false)[attr]);
    }
  </script>
</html>

看完了這篇文章，相信你對“如何使用js制作淘寶放大鏡效果”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文標題：如何使用js制作淘寶放大鏡效果-創(chuàng)新互聯(lián)
當前地址：http://muchs.cn/article42/dssoec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站內鏈、自適應網(wǎng)站、網(wǎng)站設計公司、小程序開發(fā)、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容