JS原生淘宝放大镜

最新推荐文章于 2022-10-06 17:05:39 发布

昨夜太平长安888

最新推荐文章于 2022-10-06 17:05:39 发布

阅读量138

点赞数

分类专栏： javascript 文章标签：原生js 淘宝放大镜 javascript

本文链接：https://blog.csdn.net/HelloWord176/article/details/103637842

版权

javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>放大镜</title>
    <style>
      .box {
        width: 1220px;
        height: 800px;
        margin: 0 auto;
        box-shadow: 2px 2px 10px rgb(145, 143, 143);
      }

      li {
        list-style: none;
      }

      .left {
        width: 600px;
        height: 600px;
        font-size: 0;
        position: relative;
        margin-bottom: 20px;
      }

      .left img {
        width: 100%;
        height: 100%;
      }

      .small {
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: rgba(0, 246, 297, 0.2);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
      }

      .right {
        position: absolute;
        top: 0;
        left: 620px;
        box-shadow: 2px 0 10px rgb(145, 143, 143);
        width: 600px;
        height: 600px;
        background: url("../img/0.jpg") no-repeat;
        background-size: 1800px 1800px;
        display: none;
      }

      ul {
        padding-left: 0;
        margin-top: 0;
        font-size: 0;
      }

      ul li:first-child {
        margin-left: 50px;
      }

      li {
        width: 150px;
        height: 150px;
        float: left;
        margin: 0 10px;
      }

      li img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }

      /* .pic {
        border: 3px solid rgb(58, 203, 223);
      } */
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left">
        <img src="../img/0.jpg" alt="" />
        <span class="small"></span>
        <div class="right"></div>
      </div>
      <ul>
        <li class="pic"><img src="../img/0.jpg" alt="" /></li>
        <li><img src="../img/2.jpg" alt="" /></li>
        <li><img src="../img/576530.jpg" alt="" /></li>
      </ul>
    </div>
    <script>
      //   思路：
      //    1.当鼠标移入到left上时，small盒子出现，right盒子出现
      //    2.当鼠标移出left盒子时，small盒子隐藏，right盒子隐藏
      //    3.鼠标在left盒子里移动的时候，small也跟着移动（不能超出left盒子）
      //    4.right盒子里的背景图也要跟着left盒子里的small盒子等比例的移动
      //    5.点击下面的下图片，small盒子里的图片和right里的图片跟着切换
      var left = document.querySelector(".left");
      var small = document.querySelector(".small");
      var right = document.querySelector(".right");
      var pic = document.querySelector(".left img");
      var img = document.querySelectorAll("li img");
      img[0].style.border = "3px solid red"
      left.onmouseenter = function() { // 1
        
        small.style.display = "block";
        right.style.display = "block";
      };
      left.onmouseleave = function() { // 2
        
        small.style.display = "none";
        right.style.display = "none";
      };
      left.onmousemove = function(e) {  // 3
        
        // small要想跟着鼠标移动，首先要获取鼠标的位置(获取的是鼠标距离small  left为0的位置)，如果想要鼠标在small的正中间就要减去small宽高的各一半
        var x = e.pageX - this.getBoundingClientRect().left - 100;  //3.1
        var y = e.pageY - this.getBoundingClientRect().top - 100;   // 3.1

        // 这时你会发现small的盒子移动会超出left所在的范围之内，所以这时要判断一下鼠标的位置  //3.2
        if(x < 0){ x = 0};  //这里判断的是鼠标在left盒子里移动的最小的位置
        if(y < 0){ y = 0};
          // 如果要判断 就要先获取它的最大位置和最小位置  3.2
        var maxW = left.offsetWidth - small.offsetWidth;
        var maxH = left.offsetHeight - small.offsetHeight;
        if(x > maxW){x = maxW} //这里判断的是鼠标在left盒子里移动的  最大位置 3.2
        if(y > maxH){y = maxH}
        small.style.left = x + "px";  // 3.1
        small.style.top = y + "px";   // 3.1

        // 4. right盒子里的背景图也要跟着left盒子里的small盒子等比例的移动
        var bapX = x / maxW * 1200;  // 1200: 背景图的大小减去-盒子的大小
        var bapY = y / maxH * 1200;
        right.style.backgroundPositionX = -bapX + "px";
        right.style.backgroundPositionY = -bapY + "px";
      };
      // 5.点击下面的下图片，small盒子里的图片和right里的图片跟着切换
      for(var i = 0; i < img.length; i++){
        img[i].onclick = function(){  // 当我ul下面的某一个img被点击时  5.1
            pic.src = this.src;   // pic 下面的img图片的路径等于 被点击这个图片的路径  5.2
            // right.style.backgroundImage = "url(" + this.src +")";
            right.style.backgroundImage = `url(${this.src})`;  //右边的大图的路径也变成被点击图片的路径  5.3
            for(var k = 0; k < img.length; k++){ 
                img[k].style.border = "";    // 其他的没有边框
            }
            this.style.border = "3px solid red";  //我点击的这个图片的边框变为这个样式  5.4
        }
      }
    </script>
  </body>
</html>

昨夜太平长安888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS原生淘宝放大镜

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equ...
复制链接

扫一扫