快捷導(dǎo)航

用js制作淘寶放大鏡效果

更新時間：2020年10月28日 11:30:42 作者：萬花果子

這篇文章主要為大家詳細介紹了js制作淘寶放大鏡效果的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js制作淘寶放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下

<!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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: