用js制作淘宝放大镜效果

      *{

        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;

      }

    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

      (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){

        varevt= ev||event

        varx=evt.x - content.offsetLeft -glass.offsetWidth/2 + window.scrollX - middleBorder

        vary=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]);

    }