React 实战选择互动特效小功能

javascript 复制代码
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { setSwitchPage, updateSelectedEffect } from '../store/selectionSlice';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Button, Typography, Image, Row, Col, Card } from 'antd';

export interface MainProps {}

const { Title } = Typography;

const InteractEffectPannel: React.FC<MainProps> = () => {
    const dispatch = useDispatch();
    const effects = [
        { id: 1, src: require('../assets/pika/pika1.jpg'), label: '皮卡1' },
        { id: 2, src: require('../assets/pika/pika2.jpg'), label: '皮卡2' },
        { id: 3, src: require('../assets/pika/pika3.jpg'), label: '皮卡3' },
        { id: 4, src: require('../assets/pika/pika4.jpg'), label: '皮卡4' },
        { id: 5, src: require('../assets/pika/pika5.jpg'), label: '皮卡5' },
        { id: 6, src: require('../assets/pika/pika6.jpg'), label: '皮卡6' },
        { id: 7, src: require('../assets/pika/pika7.jpg'), label: '皮卡7' },
        { id: 8, src: require('../assets/pika/pika8.jpg'), label: '皮卡8' },
    ];
    const effectsGif = [
        { id: 1, src: require('../assets/pika/pika1.jpg'), label: '皮卡1' },
        { id: 2, src: require('../assets/pika/pika2.jpg'), label: '皮卡2' },
        { id: 3, src: require('../assets/pika/pika3.jpg'), label: '皮卡3' },
        { id: 4, src: require('../assets/pika/pika4.jpg'), label: '皮卡4' },
        { id: 5, src: require('../assets/pika/pika5.jpg'), label: '皮卡5' },
        { id: 6, src: require('../assets/pika/pika6.jpg'), label: '皮卡6' },
        { id: 7, src: require('../assets/pika/pika7.jpg'), label: '皮卡7' },
        { id: 8, src: require('../assets/pika/pika8.jpg'), label: '皮卡8' },
    ];

    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
    const [hoverPosition, setHoverPosition] = useState<{ top: number; left: number } | null>(null);
    const [selectedEffect, setSelectedEffect] = useState<{src: string, label: string} | null>(null);
    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);

    const handleMouseEnter = (event: any, index: number) => {
        const rect = event.target.getBoundingClientRect();
        let left = rect.left - 25;
        const viewWidth = 700;
        console.log('left:',left)
        if (left < 0) {
            left = 10;
        }

        setHoveredIndex(index);
        setHoverPosition({ top: rect.top + rect.height + 10, left: left });
    };

    const handleEffectSelect = (effect: {src: string, label: string}, index: number) => {
        setSelectedEffect({src: effect.src, label: effect.label});
        setSelectedIndex(index);
    };

    const handleConfirm = () => {
        if (selectedEffect) {
            dispatch(updateSelectedEffect(selectedEffect));
        }
    };

    return (
        <Card style={{ width: 720, height: 700, backgroundColor: '#2E3137', borderRadius: 12 }}>
            <Row align="middle" justify="space-between" style={{ padding: '10px 10px', borderBottom: '1px solid rgba(255, 255, 255, 0.1)' }}>
                <Button
                    type="link"
                    icon={<ArrowLeftOutlined style={{ color: '#ffffff' }} />}
                    onClick={() => dispatch(setSwitchPage(false))}
                />
                <Title level={4} style={{ color: '#FFFFFF' }}>选择互动特效</Title>
                <Button type="link" style={{ color: '#FFD736' }} onClick={handleConfirm}>确定</Button>
            </Row>
            <Row gutter={[24, 24]} style={{ padding: '20px', overflowY: 'auto', maxHeight: '700px' }}>
                {effects.map((effect, index) => (
                    <Col key={effect.id} xs={12} sm={6} md={6}>
                        <Card
                            hoverable
                            bordered={false}
                            onMouseEnter={(event) => handleMouseEnter(event, index)}
                            onMouseLeave={() => setHoveredIndex(null)}
                            onClick={() => handleEffectSelect(effect, index)}
                            style={{
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'center',
                                alignItems: 'center',
                                width: 140,
                                height: 140,
                                position: 'relative',
                                boxSizing: 'border-box',
                                textAlign: 'center',
                                backgroundColor: 'rgba(0,0,0,0.5)',
                                padding: 0 // 确保没有额外的内边距
                            }}
                        >
                            <div style={{
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                height: '100%'
                            }}>
                                <Image preview={false} src={effect.src} width={80} height={80} />
                            </div>
                            <Title level={5} style={{ color: 'rgba(255, 255, 255, 0.7)', fontSize: '12px', marginTop: '-7px' }}>{effect.label}</Title>
                            {(hoveredIndex === index || selectedIndex === index) && (
                                <div style={{
                                    position: 'absolute',
                                    top: '-5px',
                                    left: '-5px',
                                    right: '-5px',
                                    bottom: '-5px',
                                    border: '2px solid yellow',
                                    borderRadius: '10px',
                                    boxSizing: 'border-box'
                                }} />
                            )}
                        </Card>
                    </Col>
                ))}
            </Row>
            {hoveredIndex !== null && hoverPosition && (
                <div
                    style={{
                        position: 'absolute',
                        top: hoverPosition.top,
                        left: hoverPosition.left,
                        width: '180px',
                        height: '180px',
                        zIndex: 1000,
                        borderRadius: '10px',
                        boxShadow: '0 0 20px rgba(0, 0, 0, 0.4)',
                        backgroundColor: '#2E3137',
                        overflow: 'hidden',
                        paddingTop:5,
                    }}
                >
                    <Image preview={false} src={effectsGif[hoveredIndex].src} width={170} height={170} />
                </div>
            )}
        </Card>
    );
};

export default InteractEffectPannel;
相关推荐
神仙别闹1 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器8 分钟前
指定阿里镜像原理
前端
枷锁—sha12 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha14 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜30 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2443 分钟前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss