放大镜图片放大（淘宝图片放大）

app.js

import React, { useState } from 'react'
import img01 from './images/01.png'
import img02 from './images/02.png'
import img03 from './images/03.png'

export default function App() {

  const [ind, setIndex] = useState(0)

  const imgs = [img01, img02, img03]

  const onMouseMoveList = (e, index) => {
    setIndex(index)
  }

  const onMouseMovePic = (e) => {
    let pic = document.getElementsByClassName('pic')[0]
    let cover = document.getElementsByClassName('cover')[0]
    let detail = document.getElementsByClassName('detail')[0]
    var top = e.clientY,
      left = e.clientX,
      py = pic.getBoundingClientRect().top,
      px = pic.getBoundingClientRect().left,
      tx = left - px - 75,
      ty = top - py - 75;
    if (tx < 0) {
      tx = 0
    }
    if (tx > 250) {
      tx = 250
    }
    if (ty < 0) {
      ty = 0
    }
    if (ty > 250) {
      ty = 250
    }
    cover.style.cursor = 'move'
    cover.style.top = ty + 'px'
    cover.style.left = tx + 'px'
    detail.style.backgroundPosition = tx / 250 * 100 + '% ' + ty / 250 * 100 + '%'
    detail.style.display = 'block'
    if (ind === 0) {
      detail.style.backgroundImage = `url(${img01})`
    } else if (ind === 1) {
      detail.style.backgroundImage = `url(${img02})`
    } else if (ind === 2) {
      detail.style.backgroundImage = `url(${img03})`
    }
  }


  return (
    <div className='App'>
      <div className="itemarea">
        <div className="pic"
          onMouseMove={onMouseMovePic}
        >
          {
            ind === 0 ?
              <img src={img01} alt="" />
              : ind === 1 ?
                <img src={img02} alt="" />
                :
                <img src={img03} alt="" />
          }
          <div className="cover"></div>
        </div>
        <ul className='list'>
          {
            imgs.map((img, index) => {
              return (
                <li
                  className={index === ind ? 'current' : ''}
                  key={index}
                  onMouseMove={(e) => onMouseMoveList(e, index)}
                >
                  <img src={img} alt="" />
                </li>
              )
            })
          }
        </ul>
        <div className="detail">

        </div>
      </div>
    </div>
  )
}

app.css

* {
  margin: 0;
  padding: 0;
}

#root {
  height: 100vh;
}

#root>.App {
  overflow: hidden;
  height: 100vh;
  background-color: #d8e7fa;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.itemarea {
  position: relative;
  width: 400px;
  height: 480px;
  border: 1px #888 solid;
  margin: 100px auto;
}

.itemarea .pic {
  margin-bottom: 15px;
}

.itemarea .pic img {
  width: 400px;
  height: 400px;
}

.itemarea .pic .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  opacity: .7;
  background-color: #88b6e1;

}

.itemarea .list {
  display: flex;
}

.itemarea .list li {
  margin: auto;
  font-size: 0;
  border: 2px solid white;

}

.itemarea .list img {
  width: 50px;
  height: 50px;
}

.itemarea .list .current {
  font-size: 0;
  border: 2px solid red;
}

.itemarea .detail {
  width: 400px;
  height: 400px;
  display: none;
  border: 1px #888 solid;
  position: absolute;
  top: 0;
  left: 400px;
  /* background: url("./images/01.png") no-repeat; */
  background-size: 300%;
}