Java教程

2021-07-17

本文主要是介绍2021-07-17，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

放大镜 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>


                    

                        这篇关于2021-07-17的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
                    


                


                
                
 

                
                

                    

                        
您可能喜欢

                        
                    

                

                

            

             
            
            
            
        

        
        

        

            

                
栏目导航