介绍:
实现商品详情页 鼠标移入图片中,右边放大显示
效果
直接使用需要引入 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;
}
如果觉得有用,一键三连走一波 ☺~~~