js原生demo商品放大镜效果

---

<style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }        
        .leftcon {
            width: 350px;
            height: 350px;
            border: 1px solid #eee;
        }
        .leftcon img {
            width: 100%;
            height: 100%;
        }
        .leftcon .slide_box {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 175px;
            height: 175px;
            background: #000;
            opacity: 0.3;
            cursor: move;
        }
        .rightcon {
            display: none;
            width: 350px;
            height: 350px;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 352px;
        }
        .rightcon img {
            width: 200%;
            height: 200%;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .hoverBox:hover{
          border: 1px solid #666 !important;
        }
        #maxImg{
          width: 350px;
          height: 65px;
          display: flex;justify-content: space-between;
          margin-top: 10px;
        }
    </style>

  <div style="position: relative;">
    <div class="leftcon" id="left">
      <img src="./image/1.jpg" />
      <div class="slide_box" id="box"></div>
    </div>
    
    <div id="maxImg"></div>
    <div class="rightcon" id="right">
      <img src="./image/1.jpg" />
    </div>
  </div>

var imgUrl = ['./image/1.jpg','./image/2.jpg','./image/3.jpg','./image/1.jpg','./image/2.jpg']
  var imgUrlStr = ''
  imgUrl.forEach((temp,i)=>{
    // onmouseover="getMouseover(${temp})"
    imgUrlStr+=`
      <div class="hoverBox" style="width: 65px;height: 65px;border: 1px solid #eee;cursor: pointer;" onmouseover="getMouseover(${i})">
        <img src="${temp}" style="width: 100%;" alt="">
      </div>
    `
  })
  document.getElementById('maxImg').innerHTML = imgUrlStr
 

    var leftone = document.getElementById("left");
    var rightone = document.getElementById("right");
    var box = document.getElementById("box");
    var rimg = rightone.getElementsByTagName("img")[0];


    function getMouseover(e){
      document.querySelector('#left img').src = imgUrl[e]
      document.querySelector('#right img').src = imgUrl[e]
    }
    function getPosition(e) {

        var e = e || window.event;
        var top = e.clientY - leftone.offsetTop - box.offsetHeight / 2;
        var left = e.clientX - leftone.offsetLeft - box.offsetWidth / 2;


        var maxtop = leftone.offsetHeight - box.offsetHeight; 
        var maxleft = leftone.offsetWidth - box.offsetWidth; 
        var mintop = 0; 
        var minleft = 0; 
        var mvtop; 
        var mvleft; 

        if (top < mintop) {
            box.style.top = mintop + "px";
            mvtop = mintop;
            
        } else if (top > maxtop) {
            box.style.top = maxtop + "px";
            mvtop = maxtop;
         
        } else {
            box.style.top = top + "px";
            mvtop = top;
           
        }
        if (left < minleft) {
            box.style.left = minleft + "px";
            mvleft = minleft;
        } else if (left > maxleft) {
            box.style.left = maxleft + "px";
            mvleft = maxleft;
        } else {
            box.style.left = left + "px";
            mvleft = left;
        }

        rimg.style.top = -mvtop * 2 + "px";
        rimg.style.left = -mvleft * 2 + "px";
    }


    //鼠标移动效果
    leftone.onmousemove = function(e) {
        var e = e || window.event; 
        box.style.display = "block";
        getPosition(e);
        rightone.style.display = "block";
    };

    //鼠标移出效果
    leftone.onmouseleave = function(e) {
        var e = e || window.event; 
        box.style.display = "none";
        rightone.style.display = "none";
    };

offsetTop 和 offsetLeft 有时候因为css 问题 
导致获取的数值不对可以用getBoundingClientRect()来获取top和left 


 #box {
      position: relative;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: #3498db;
    }

<div id="box"></div>


var box = document.getElementById('box');

// 获取元素的位置信息
var rect = box.getBoundingClientRect();

console.log('DOMRect 对象:', rect);
console.log('元素左上角的 x 坐标:', rect.left);
console.log('元素左上角的 y 坐标:', rect.top);
console.log('元素的宽度:', rect.width);
console.log('元素的高度:', rect.height);

 vue3版本

父组件
<template>
  <div class="common-layout">
    <About :imgUrl="mainImage_url"></About>
  </div>
</template>

子组件

<template>
  <div>
    <div style="position: relative;">
      <div class="leftcon" id="left" @mousemove="getonmousemove($event)" @mouseleave="getonmouseleave($event)">
        <img :src="selectedImage" />
        <div class="slide_box" id="box"></div>
      </div>
      
      <div id="maxImg">
        <div v-for="(item, index) in imgUrl" :key="index" :class="activeImg == index ? 'active':''" style="width: 65px; height: 65px; border: 1px solid #eee; cursor: pointer;" @mouseover="getMouseover(index)">
          <img :src="item" style="width: 100%;" alt="">
        </div>
      </div>
      <div class="rightcon" id="right">
        <img :src="selectedImage" id="imgs" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref , defineProps } from 'vue';

const props = defineProps({ imgUrl: Array });
console.log(props)
const imgUrl = props.imgUrl;
const selectedImage =ref(imgUrl[0] || '')
const activeImg = ref(0)

function getMouseover(e,index) {
  console.log(e,index)
  selectedImage.value = imgUrl[e];
  activeImg.value = e
}
const getonmousemove = (event) => {
  // 在这里处理鼠标移动事件
  var e = event || window.event; 
  document.getElementById("box").style.display = "block";
  document.getElementById('right').style.display = "block";
  getPosition(e)
};

const getonmouseleave = (event) => {
  // 在这里处理鼠标离开事件
  // console.log('Mouse left', event);
  var e = event || window.event; 
  document.getElementById("box").style.display = "none";
  document.getElementById('right').style.display = "none";
};

const getPosition = (e)=> {
 const leftone = (document.getElementById("left")).getBoundingClientRect()
 const box = document.getElementById("box")
 const  rimg = document.getElementById("imgs")
 var e = e || window.event;
 var top = e.clientY - leftone.top - box.offsetHeight / 2;
 var left = e.clientX - leftone.left - box.offsetWidth / 2;



 var maxtop = leftone.height - box.offsetHeight; 
 var maxleft = leftone.width - box.offsetWidth; 

 var mintop = 0; 
 var minleft = 0; 
 var mvtop; 
 var mvleft; 

 if (top < mintop) {
    box.style.top = mintop + "px";
     mvtop = mintop;
     
 } else if (top > maxtop) {
    box.style.top = maxtop + "px";
     mvtop = maxtop;
  
 } else {
    box.style.top = top + "px";
     mvtop = top;
    
 }
 if (left < minleft) {
    box.style.left = minleft + "px";
     mvleft = minleft;
 } else if (left > maxleft) {
    box.style.left = maxleft + "px";
     mvleft = maxleft;
 } else {
    box.style.left = left + "px";
     mvleft = left;
 }

 rimg.style.top = -mvtop * 2 + "px";
 rimg.style.left = -mvleft * 2 + "px";
}


</script>
<style>
.leftcon {
  width: 350px;
  height: 350px;
  border: 1px solid #eee;
}
.leftcon img {
  width: 100%;
  height: 100%;
}
.leftcon .slide_box {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 175px;
  height: 175px;
  background: #000;
  opacity: 0.3;
  cursor: move;
}
.rightcon {
  display: none;
  width: 350px;
  height: 350px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 352px;
}
.rightcon img {
  width: 200%;
  height: 200%;
  position: absolute;
  left: 0;
  top: 0;
}

.active{
  border: 1px solid #666 !important;
}
#maxImg {
  width: 350px;
  height: 65px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>