react hooks 实现商品详情页 鼠标移入图片中,右边放大显示

介绍:

实现商品详情页 鼠标移入图片中,右边放大显示

效果

直接使用需要引入 primereact UI框架 ,如果只是作为dome,需要修改banner组件(Galleria)

npm install primereact
npm install primeicons

js代码如下:

import { useEffect, useState, useRef } from "react";
import styles from './productDetail.module.css';
import { Galleria } from 'primereact/galleria';
export default function ProductDetail() {
  const [bubblesObj, setBubblesObj] = useState({})
  const [images, setImages] = useState([{
    url: "https://www.primefaces.org/primereact-v6/showcase/demo/images/galleria/galleria1.jpg",
    alt: "1"
  }, {
    url: "https://www.primefaces.org/primereact-v6/showcase/demo/images/galleria/galleria2.jpg",
    alt: "2"
  }]);
  
  const onMousemove = (e) => {
    let x, y
    let canvas = document.getElementById('canvas');
    let positioning = document.getElementById("positioning");
    var event = e.nativeEvent;

    if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器
      x = event.offsetX;
      y = event.offsetY;
    } else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器
      x = event.layerX;
      y = event.layerY;
    }
    let top = 0
    let left = 0;
    if (x < 100) {

      left = 0;
    } else if (x > 250) {
      left = 150;
    } else {
      left = x - 100;
    }

    if (y - 70 < 0) {
      top = 0;
    } else if (y - 70 > 210) {
      top = 210;
    } else {
      top = y - 70;
    }
    positioning.style.left = left + 'px';
    positioning.style.top = top + 'px';
    canvas.style.left = -3.5 * left + 'px';
    canvas.style.top = -1.666 * top + 'px';


  }

  const onMouseEnter = (params) => {
    let _bubblesObj = { ...bubblesObj }
    if (!_bubblesObj[params]) {
      _bubblesObj[params] = true
      setBubblesObj(_bubblesObj)
    }
  }


  const onMouseLeave = (params) => {
    let _bubblesObj = { ...bubblesObj }
    _bubblesObj[params] = false;
    setBubblesObj(_bubblesObj)
  }


  const itemTemplate = (item) => {
    return <img
      onMouseEnter={() => onMouseEnter("banner")}
      onMouseLeave={() => onMouseLeave("banner")}
      src={item.url}
      alt={item.alt}
      style={{ width: "350px", height: "350px", }} />
  }
  const thumbnailTemplate = (item) => {
    return <img src={item.url} alt={item.alt} style={{ width: '100%', display: 'block' }} />
  }
  

  return (<div className={styles.page}>
    
    <div className={styles.details}>
      <div className={styles.leftBanner} onMouseMove={(e) => onMousemove(e)}>
        <Galleria value={images}
          numVisible={5}
          style={{ width: '400px', height: "400px" }}
          item={itemTemplate}
          thumbnail={thumbnailTemplate} />
        <div style={{ display: bubblesObj.banner ? "block" : "none" }} id="positioning" className={styles.positioningBox}> </div>
      </div>

      <div className={styles.Popup} style={{ display: bubblesObj.banner ? "block" : "none" }}>
        <img src='https://www.primefaces.org/primereact-v6/showcase/demo/images/galleria/galleria1.jpg' id={"canvas"} className={styles.canvasBox} />
        </div>
        </div>
  </div>)
}

css代码如下
productDetail.module.css

.page {
  min-height: 700px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  background-color: #fff;
  flex-direction: column;
}
.pageBox {
  min-width: 1500px;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  position: relative;
}
.router {
  display: flex;
  align-items: center;
}
.routerText {
  font-size: 16px;
  color: #333;
}

.details {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.leftBanner {
  display: flex;
  position: relative;
  background-color: #ff6a00;
  width: 350px;
  height: 350px;
}

.canvasBox {
  position: absolute;
  left: 600px;
  top: 100px;
  width: 525px;
  height: 350px;
  transform: scale(2);
  /* transform-origin: top left; */
  transform-origin: 0 0 0;
}
.positioningBox {
  width: 200px;
  height: 140px;
  position: absolute;
  /* left: -0px;
  top: 0px; */
  border: 1px solid rgb(255, 106, 0);
  background-color: rgba(255, 106, 0, 0.2);
  pointer-events: none;
}
.Popup {
  width: 525px;
  height: 350px;
  position: absolute;
  left: 350px;
  /* background-color: #ff6a00; */
  display: inline-block;
  overflow: hidden;
}

如果觉得有用,一键三连走一波 ☺~~~