图片放大镜

2023-10-31 08:10:58
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>放大镜</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #demo {
        display: block;
        width: 323px;
        height: 430px;
        margin: 5px;
        position: relative;
        border: 1px solid #ccc;
      }
      #small-box {
        position: relative;
        z-index: 1;
      }
      #float-box {
        display: none;
        width: 160px;
        height: 120px;
        position: absolute;
        background: #ffffcc;
        border: 1px solid #ccc;
        filter: alpha(opacity=50);
        opacity: 0.5;
      }
      #big-box {
        display: none;
        position: absolute;
        top: 0;
        left: 0px;
        width: 323px;
        height: 430px;
        overflow: hidden;
        border: 1px solid #ccc;
        z-index: 10;
        cursor: crosshair;
      }
      #big-box img {
        display: inline-block;
        width: 323px;
        position: absolute;
        z-index: 5;
      }
    </style>
  </head>
  <body>
    <div id="demo">
      <div id="small-box">
        <div id="float-box"></div>
        <img
          src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg_430x430q90.jpg"
        />
      </div>
      <div id="big-box">
        <img
          class="maxImg"
          src="https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg"
        />
      </div>
    </div>
    <script>
      //页面加载完毕后执行
      window.onload = function() {
        //找五个个元素：demo，smallBox,foatBox,bigfloatBox,imgs,
        var objDemo = document.getElementById("demo");
        var objSmallBox = document.getElementById("small-box");
        var objFloatBox = document.getElementById("float-box");
        var objBigBox = document.getElementById("big-box");
        var objBigBoxImg = objBigBox.getElementsByTagName("img")[0];
        var sacle = 2;

        //给小盒子添加事件，移入和移出
        //移入：浮动的box和和bigBox显示
        objDemo.onmouseover = function() {
          objFloatBox.style.display = "block";
          objBigBox.style.display = "block";
          sacle = 2;
          changeImgWidth();
        };
        //移除：浮动的box和bigBox隐藏
        objDemo.onmouseout = function() {
          objFloatBox.style.display = "none";
          objBigBox.style.display = "none";
          sacle = 2;
          document.querySelector(".maxImg").style.width =
            objDemo.clientWidth + "px";
          changeImgWidth(true);
        };

        // 鼠标滑动事件
        objDemo.onmousewheel = function(event) {
          if (event.deltaY < 0) {
            sacle += 0.01;
          } else {
            sacle -= 0.01;
          }
          if (sacle < 1) {
            sacle = 1;
          }
          if (sacle > 2) {
            sacle = 2;
          }
          changeImgWidth();
          event.preventDefault();
        };

        //给小盒子添加鼠标移动事件
        objDemo.onmousemove = function(ev) {
          setSize(ev);
        };

        function changeImgWidth(notRender) {
          if (!notRender) {
            var demoWidth = objDemo.clientWidth;
            objBigBoxImg.style.width = demoWidth * sacle + "px";
            setSize(event);
          }
        }

        function setSize(ev) {
          var _event = ev || window.event; //做兼容性，兼容IE
          //1计算值：
          var left =
            _event.clientX -
            objDemo.offsetLeft -
            objSmallBox.offsetLeft -
            objFloatBox.offsetWidth / 2;
          var top =
            _event.clientY -
            objDemo.offsetTop -
            objSmallBox.offsetTop -
            objFloatBox.offsetHeight / 2;

          //5.优化，在前面加判断,不让其溢出，加判断
          if (left < 0) left = 0;
          if (top < 0) top = 0;
          if (left > objSmallBox.offsetWidth - objFloatBox.offsetWidth)
            left = objSmallBox.offsetWidth - objFloatBox.offsetWidth;
          if (top > objSmallBox.offsetHeight - objFloatBox.offsetHeight)
            top = objSmallBox.offsetHeight - objFloatBox.offsetHeight;

          //2把值赋值给放大镜
          objFloatBox.style.left = left + "px";
          objFloatBox.style.top = top + "px";

          //3计算比例
          var percentX =
            left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth);
          var percentY =
            top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight);

          //4利用这个比例计算距离后赋值给右侧的图片
          objBigBoxImg.style.left =
            -percentX * (objBigBoxImg.offsetWidth - objBigBox.offsetWidth) +
            "px";
          objBigBoxImg.style.top =
            -percentY * (objBigBoxImg.offsetHeight - objBigBox.offsetHeight) +
            "px";
        }
      };
    </script>
  </body>
</html>
图片放大镜
码农公寓

相关文章
