2021-07-17

2021-07-17 23:30:09 阅读：134 来源： 互联网

标签：style 07 17 50 width let 2021 imgs border

放大镜 tab栏切换

效果图
可以选择切换下面小图片在这里插入图片描述


```javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-size: 0;
      }
      #box {
        position: relative;
      }
      #view {
        width: 640px;
        border-radius: 10px;
        position: relative;
        cursor: crosshair;
      }
      #view img {
        width: 100%;
      }
      #onpic {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: lightpink;
        left: 0;
        top: 0;
      }
      #suolue {
        width: 640px;
      }
      #suolue img {
        width: 128px;
        border: 2px solid transparent;
        box-sizing: border-box;
      }
      #bigpic {
        width: 600px;
        height: 600px;
        position: absolute;
        top: 0;
        left: 650px;
        border-radius: 10px;
        overflow: hidden;
      }
      #bigpic img {
        width: 3840px;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="view">
        <img src="./images/a.jpg" id="smallpic" alt="" />
        <!-- 移动镜框 -->
        <div id="onpic"></div>
      </div>
      <!-- 下面的小的缩图 -->
      <div id="suolue">
        <img src="./images/a.jpg" alt="" />
        <img src="./images/c.jpg" alt="" />
        <img src="./images/e.jpg" alt="" />
        <img src="./images/f.jpg" alt="" />
        <img src="./images/g.jpg" alt="" />
      </div>
      <div id="bigpic">
        <img src="./images/a.jpg" id="bigimg" alt="" />
      </div>
    </div>
  </body>
  <script>
    //鼠标移动事件
    view.onmousemove = function (e) {
      var x = e.clientX;
      var y = e.clientY;
      console.log(x,y);
      //控制移动范围
      if (x < 640 && y < 360) {
        if (x > 640 - 50) {
          x = 590;
        }
        if (x < 50) {
          x = 50;
        }
        if (y > 310) {
          y = 310;
        }
        if (y < 50) {
          y = 50;
        }
        console.log(x, y);
        onpic.style.top = y - 50 + "px";
        onpic.style.left = x - 50 + "px";
        //图片比例关系
        bigimg.style.top = -y * 6 + 50 * 6 + "px";
        bigimg.style.left = -x * 6 + 50 * 6 + "px";
      }
    };
    let imgs = document.querySelectorAll("#suolue img");
    let smallImg = document.querySelector("#smallpic");
    let bigImg = document.querySelector("#bigimg");
    //点击小缩图切换
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].onclick = function () {
        console.log(imgs[i]);
        smallImg.src = this.src;
        bigImg.src = this.src;
        for (let i = 0; i < imgs.length; i++) {
          imgs[i].style.borderColor = "";
        }
        this.style.borderColor = "lightpink";
      };
    }
  </script>
</html>

标签：style,07,17,50,width,let,2021,imgs,border
来源： https://blog.csdn.net/weixin_52259118/article/details/118864361

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-07-17

放大镜 tab栏切换