当前位置：首页 > React

react实现放大镜

2026-01-27 10:46:42React

实现思路

通过监听鼠标在图片上的移动事件，动态计算放大镜的显示区域和放大比例。利用CSS裁剪和定位实现局部放大效果。

基础HTML结构

<div className="magnifier-container">
  <img 
    src="原始图片路径" 
    className="original-image"
    onMouseMove={handleMouseMove}
    onMouseLeave={() => setShowMagnifier(false)}
  />
  {showMagnifier && (
    <div 
      className="magnifier" 
      style={{
        backgroundImage: `url(${imgUrl})`,
        backgroundPosition: `${-position.x * scale}px ${-position.y * scale}px`,
        left: `${position.x}px`,
        top: `${position.y}px`
      }}
    />
  )}
</div>

核心CSS样式

.magnifier-container {
  position: relative;
  width: fit-content;
}

.original-image {
  display: block;
  max-width: 100%;
}

.magnifier {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid #fff;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: calc(100% * var(--scale));
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

React组件逻辑

import { useState } from 'react';

function Magnifier({ imgUrl, scale = 2 }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [showMagnifier, setShowMagnifier] = useState(false);

  const handleMouseMove = (e) => {
    const { left, top, width, height } = e.target.getBoundingClientRect();
    const x = ((e.pageX - left) / width) * 100;
    const y = ((e.pageY - top) / height) * 100;

    setPosition({ x: e.pageX - left - 75, y: e.pageY - top - 75 });
    setShowMagnifier(true);
  };

  return (
    <div style={{ position: 'relative' }}>
      <img
        src={imgUrl}
        style={{ display: 'block', maxWidth: '100%' }}
        onMouseMove={handleMouseMove}
        onMouseLeave={() => setShowMagnifier(false)}
      />
      {showMagnifier && (
        <div
          style={{
            position: 'absolute',
            width: '150px',
            height: '150px',
            borderRadius: '50%',
            border: '2px solid #fff',
            pointerEvents: 'none',
            backgroundImage: `url(${imgUrl})`,
            backgroundPosition: `${-position.x * scale}px ${-position.y * scale}px`,
            backgroundSize: `${scale * 100}%`,
            left: `${position.x}px`,
            top: `${position.y}px`,
            boxShadow: '0 0 10px rgba(0,0,0,0.2)'
          }}
        />
      )}
    </div>
  );
}