放大镜demo_`url("${bigimgpath}")`-CSDN博客

本文链接：https://blog.csdn.net/Almee211/article/details/120070934

使用一张图完成效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .middleBox {
      width: 400px;
      height: 400px;
      position: relative;
      margin: 5px;
    }

    .middleBox img {
      width: 400px;
      height: 400px;
    }

    .mask {
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 0, 0.6);
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .bigBox {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 105%;
      top: 0;
      overflow: hidden;
      display: none;
    }

    .bigBox img {
      width: 1600px;
      height: 1600px;
      position: absolute;
      left: 0;
      top: 0;
    }

    .smallBox img {
      width: 50px;
      height: 50px;
      margin: 10px;
      border: 3px solid black;
    }

    .smallBox img.active {
      border-color: red;
    }

    .mask:hover {
      cursor: move;
    }
  </style>
</head>

<body>
  <div class="enlarge">
    <div class="middleBox">
      <img src="images/1.jpg">
      <div class="mask"></div>
      <div class="bigBox">
        <img src="images/1.jpg">
      </div>
    </div>

    <div class="smallBox">
      <img class="active" src="images/1.jpg">
      <img src="images/2.jpg">
      <img src="images/3.jpg">
    </div>
  </div>
</body>
<script>
  function Enlarge(classname) {
    this.box = document.querySelector('.' + classname)
    this.middleBox = this.box.querySelector('.middleBox')
    this.middleImg = this.box.querySelector('.middleBox img')
    this.bigBox = this.box.querySelector('.bigBox')
    this.bigImg = this.box.querySelector('.bigBox img')
    this.smallImgs = this.box.querySelectorAll('.smallBox img')
    this.mask = this.box.querySelector('.mask')
    this.bindEvent()
  }

  //绑定事件
  Enlarge.prototype.bindEvent = function () {
    //点击小图实现切换
    for (let i = 0; i < this.smallImgs.length; i++) {
      this.smallImgs[i].onclick = () => {
        for (var j = 0; j < this.smallImgs.length; j++) {
          this.smallImgs[j].className = ''
        }
        this.smallImgs[i].className = 'active'
        //切换中图和大图
        var path = this.smallImgs[i].getAttribute('src')
        this.middleImg.setAttribute('src', path)
        this.bigImg.setAttribute('src', path)
      }
    }
    //移入显示遮罩和大盒子
    this.middleBox.onmouseover = () => {
      this.mask.style.display = 'block'
      this.bigBox.style.display = 'block'

      //移动
      this.middleBox.onmousemove = () => {
        var e = window.event
        var x = e.pageX
        var y = e.pageY
        var l = x - this.mask.offsetWidth / 2 - this.middleBox.offsetLeft
        var t = y - this.mask.offsetHeight / 2 - this.middleBox.offsetTop
        //限制
        if (l < 0) l = 0
        if (t < 0) t = 0
        if (l > this.middleBox.clientWidth - this.mask.offsetWidth) { 
          l = this.middleBox.clientWidth - this.mask.offsetWidth 
        }
        if(t>this.middleBox.clientHeight - this.mask.offsetHeight){
          t = this.middleBox.clientHeight - this.mask.offsetHeight
        }
        this.mask.style.left = l + 'px'
        this.mask.style.top = t + 'px'

        //大图移动
        percentx = l/this.middleBox.clientWidth
        percenty = t/this.middleBox.clientHeight
        var bigx = percentx * this.bigImg.offsetWidth
        var bigy = percenty * this.bigImg.offsetHeight
        this.bigImg.style.left = -bigx +'px'
        this.bigImg.style.top = -bigy +'px'
      }
    }
    //移出时大盒子和遮罩消失
    this.middleBox.onmouseout = () => {
      this.mask.style.display = 'none'
      this.bigBox.style.display = 'none'
    }
  }

  var e = new Enlarge('enlarge')
</script>

</html>

使用大中小三张图当背景图完成效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>放大镜</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .middleBox {
      width: 400px;
      height: 400px;
      position: relative;
      margin: 5px;
    }

    .mask {
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 0, 0.6);
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .bigBox {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 105%;
      top: 0;
      background-image: url(images/big1.jpg);
      background-position: 0 0;
      background-size: 1600px 1600px;
      display: none;
    }

    .smallBox img {
      margin: 10px;
      border: 3px solid black;
    }

    .smallBox img.active {
      border-color: red;
    }

    .mask:hover {
      cursor: move;
    }
  </style>
</head>

<body>
  <div class="enlarge">
    <div class="middleBox">
      <img src="images/middle1.jpg">
      <div class="mask"></div>
      <div class="bigBox"></div>
    </div>

    <div class="smallBox">
      <img class="active" src="images/small1.jpg">
      <img src="images/small2.jpg">
    </div>
  </div>
</body>
<script>
  function Enlarge(classname) {
    //获取要操作的大盒子
    this.box = document.querySelector('.' + classname)
    //获取要操作的元素
    this.middleBox = this.box.querySelector('.middleBox')
    this.middleImg = this.box.querySelector('.middleBox>img')
    this.bigBox = this.box.querySelector('.bigBox')
    this.mask = this.box.querySelector('.mask')
    this.smallImgs = this.box.querySelectorAll('.smallBox>img')
    //调用函数
    this.bindEvent()
  }

  Enlarge.prototype.bindEvent = function () {
    //点击小图换图，类似于tab切换
    //点击小图，小图边框颜色切换，显示为切换的状态
    for (let i = 0; i < this.smallImgs.length; i++) {
      this.smallImgs[i].onclick = () => {
        for (var j = 0; j < this.smallImgs.length; j++) {
          this.smallImgs[j].className = ''
        }
        this.smallImgs[i].className = 'active'
        //点击小图，中图切换
        //获取当前点击的小图路径
        var smallPath = this.smallImgs[i].getAttribute('src')
        //将small替换成middle，更换路径
        var middlePath = smallPath.replace('small', 'middle')
        //给中图设置路径
        this.middleImg.setAttribute('src', middlePath)
        //将small替换成middle，更换路径
        var middlePath = smallPath.replace('small', 'middle')
        //给中图设置路径
        this.middleImg.setAttribute('src', middlePath)
        //大图同理
        var bigPath = smallPath.replace('small', 'big')
        this.bigBox.style.backgroundImage = `url(${bigPath})`
      }
    }
    //使遮罩随鼠标移动，并且使光标移至处于中间位置
    //鼠标移入中盒子，遮罩和大图出现
    this.middleBox.onmouseover=() =>{
      this.mask.style.display = 'block'
      this.bigBox.style.display = 'block'
      //移动事件
      this.middleBox.onmousemove=()=>{
        var e = window.event
        var x = e.pageX
        var y = e.pageY
        //计算l和t的距离
        var l  = x -this.mask.offsetWidth/2 - this.middleBox.offsetLeft
        var t  = y -this.mask.offsetHeight/2 - this.middleBox.offsetTop
        //限制范围
        if(l<0){
          l = 0
        }
        if(t<0){
          t = 0
        }
        if(l>this.middleBox.clientWidth-this.mask.offsetWidth){
          l = this.middleBox.clientWidth-this.mask.offsetHeight
        }
        if(t>this.middleBox.clientHeight-this.mask.offsetHeight){
          t = this.middleBox.clientHeight-this.mask.offsetHeight
        }
        //显示遮罩的位置
        this.mask.style.left = l +'px'
        this.mask.style.top = t +'px'
        //大图需要的移动比例等于遮罩在中盒子里移动的比例
        percentX = l/this.middleBox.clientWidth
        percentY =t/this.middleBox.clientHeight
        var bigStyle = this.getStyle(this.bigBox,'background-size')
        var bigStyleArr = bigStyle.split(' ')
        var bigWidth = parseInt(bigStyleArr[0])
        var bigHeight =parseInt(bigStyleArr[1])
        var bigLeft = bigWidth * percentX
        var bigTop = bigHeight * percentY
        this.bigBox.style.backgroundPosition = `-${bigLeft}px -${bigTop}px`

      }
    }
    this.middleBox.onmouseout = ()=>{
      this.mask.style.display = 'none'
      this.bigBox.style.display = 'none'
    }
  }

  Enlarge.prototype.getStyle = function(ele,attr){
    if(window.getComputedStyle){
      return getComputedStyle(ele)[attr]
    }else {
      return ele.currentStyle[attr]
    }
  }

  //new一个对象将类名传入
  var e = new Enlarge('enlarge')
</script>

</html>