效果

GIF.gif

html

<div id="content">
  <div id="img">
    <img id="mImg" src="2.jpg">
    <div id="mask"></div>
    <div id="sMask"></div>
  </div>
  <div id="showImg"></div>
</div>

css

    #content{
      width:500px;
      position: relative;
      margin: 0 auto;
    }
    #img{
      width:350px;
      height:350px;
    }
    #showImg{
      width:400px;
      height:400px;
      position:absolute;
      /*border:1px solid #000;*/
      top:0px;
      left:350px;
      z-index: 10;
      background:url("1.jpg");
      display: none;
    }
    #mask {
      position: absolute;
      width: 175px;
      height: 175px;
      background: #ffa;
      opacity: 0.5;
      top: 0;
      left: 0;
      display: none;
    }
    #sMask {
      position: absolute;
      width: 350px;
      height: 350px;
      opacity: 0;
      top: 0;
      left: 0;
      cursor: move;
    }

javascript

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script>
    //鼠标经过
    $("#sMask").mouseover(()=>{
      $("#showImg").css("display","block");
      $("#mask").css("display","block");
    });
    //鼠标移出
    $("#sMask").mouseout(()=>{
      $("#showImg").css("display","none");
      $("#mask").css("display","none");
    });
    var MASK=175;//保存mask大小
    var SMASK=350;//保存smask大小
    //鼠标在sMask移动时
    $("#sMask").mousemove(e=>{
      var left=e.offsetX-MASK/2;//获得left位置
      var top=e.offsetY-MASK/2;//获得top位置

      //判断top是否超出范围，超出则设置最边缘坐标
      if(top<0){
        top=0;
      }
      else if(top>SMASK-MASK){
        top=SMASK-MASK;
      }
      //判断left是否超出范围，超出则设置最边缘坐标
      if(left<0){
        left=0;
      }else if(left>SMASK-MASK){
        left=SMASK-MASK;
      }
      //设置mask的位置跟随鼠标的坐标
      $("#mask").css({
        "top":top+"px",
        "left":left+"px"
      });
      //设置放大镜背景定位跟随mask的坐标
      $("#showImg").css("backgroundPosition",`${-left*(16/7)}px ${-top*(16/7)}px`);
    });
  </script>

完整代码

<html>
<head runat="server">
    <title>详情页放大镜</title>
    <meta charset="utf-8">
    <style type="text/css">
    #content{
      width:500px;
      position: relative;
      margin: 0 auto;
    }
    #img{
      width:350px;
      height:350px;
    }
    #showImg{
      width:400px;
      height:400px;
      position:absolute;
      /*border:1px solid #000;*/
      top:0px;
      left:350px;
      z-index: 10;
      background:url("1.jpg");
      display: none;
    }
    #mask {
      position: absolute;
      width: 175px;
      height: 175px;
      background: #ffa;
      opacity: 0.5;
      top: 0;
      left: 0;
      display: none;
    }
    #sMask {
      position: absolute;
      width: 350px;
      height: 350px;
      opacity: 0;
      top: 0;
      left: 0;
      cursor: move;
    }
    </style>
</head>

<body style="width: 1200px">
  <div id="content">
    <div id="img">
      <img id="mImg" src="2.jpg">
      <div id="mask"></div>
      <div id="sMask"></div>
    </div>
    <div id="showImg"></div>
  </div>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script>
    //鼠标经过
    $("#sMask").mouseover(()=>{
      $("#showImg").css("display","block");
      $("#mask").css("display","block");
    });
    //鼠标移出
    $("#sMask").mouseout(()=>{
      $("#showImg").css("display","none");
      $("#mask").css("display","none");
    });
    var MASK=175;//保存mask大小
    var SMASK=350;//保存smask大小
    //鼠标在sMask移动时
    $("#sMask").mousemove(e=>{
      var left=e.offsetX-MASK/2;//获得left位置
      var top=e.offsetY-MASK/2;//获得top位置

      //判断top是否超出范围，超出则设置最边缘坐标
      if(top<0){
        top=0;
      }
      else if(top>SMASK-MASK){
        top=SMASK-MASK;
      }
      //判断left是否超出范围，超出则设置最边缘坐标
      if(left<0){
        left=0;
      }else if(left>SMASK-MASK){
        left=SMASK-MASK;
      }
      //设置mask的位置跟随鼠标的坐标
      $("#mask").css({
        "top":top+"px",
        "left":left+"px"
      });
      //设置放大镜背景定位跟随mask的坐标
      $("#showImg").css("backgroundPosition",`${-left*(16/7)}px ${-top*(16/7)}px`);
    });
  </script>
</body>
</html>
© 允许规范转载