|
|
@ -2,12 +2,12 @@
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* 滚动容器
|
|
|
|
* 滚动容器
|
|
|
|
* TODO: 自定义滚动速度
|
|
|
|
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
import React, { useRef, useEffect, useState } from 'react';
|
|
|
|
import React, { useRef, useEffect, useState } from 'react';
|
|
|
|
|
|
|
|
|
|
|
|
interface TextScrollProps {
|
|
|
|
interface TextScrollProps {
|
|
|
|
|
|
|
|
auto?: boolean;
|
|
|
|
hover?: boolean;
|
|
|
|
hover?: boolean;
|
|
|
|
speed?: number;
|
|
|
|
speed?: number;
|
|
|
|
width: string;
|
|
|
|
width: string;
|
|
|
@ -17,10 +17,11 @@ interface TextScrollProps {
|
|
|
|
|
|
|
|
|
|
|
|
const TextScroll: React.FC<TextScrollProps> = ({
|
|
|
|
const TextScroll: React.FC<TextScrollProps> = ({
|
|
|
|
width = '100px',
|
|
|
|
width = '100px',
|
|
|
|
|
|
|
|
auto = false,
|
|
|
|
className = '',
|
|
|
|
className = '',
|
|
|
|
children = '',
|
|
|
|
children = '',
|
|
|
|
hover = false,
|
|
|
|
hover = false,
|
|
|
|
speed = 30,
|
|
|
|
speed = 5,
|
|
|
|
}) => {
|
|
|
|
}) => {
|
|
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const childrenRef = useRef<HTMLParagraphElement>(null);
|
|
|
|
const childrenRef = useRef<HTMLParagraphElement>(null);
|
|
|
@ -62,7 +63,11 @@ const TextScroll: React.FC<TextScrollProps> = ({
|
|
|
|
onMouseEnter={() => handleMouseMove(true)}
|
|
|
|
onMouseEnter={() => handleMouseMove(true)}
|
|
|
|
onMouseLeave={() => handleMouseMove(false)}
|
|
|
|
onMouseLeave={() => handleMouseMove(false)}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div ref={childrenRef} className={`flex flex-row items-center relative w-[fit-content] h-auto ${className}`}>
|
|
|
|
<div
|
|
|
|
|
|
|
|
ref={childrenRef}
|
|
|
|
|
|
|
|
className={`flex flex-row items-center relative w-[fit-content] h-auto ${className}`}
|
|
|
|
|
|
|
|
style={{ animation: auto ? animation : 'none' }}
|
|
|
|
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
{children}
|
|
|
|
{isOverflowing && (
|
|
|
|
{isOverflowing && (
|
|
|
|
<>
|
|
|
|
<>
|
|
|
|