文字跑马灯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React, { useImperativeHandle, useRef, useState, useEffect } from "react";
import { useMount } from "ahooks";
import styles from './style.module.scss'
import classNames from 'classnames/bind'
const relationObj = {};
const Marquee = React.forwardRef(
(props, pRef) => {
const {
array,
waitSecond = 5,
waitNextSecond = 2,
rolling = true,
speedTimes = 1,
behindfix,
...otherProps
} = props;
const cx = classNames.bind(styles); //样式引用，替换成自己的即可
const ref = React.createRef();
const sRef = React.createRef();
useImperativeHandle(pRef, () => ref.current);
const [curText, setText] = useState(array[0]);
const [index, setIndex] = useState(array[0]);
useMount(() => {
relationObj[`${behindfix}`] = {};
relationObj[`${behindfix}`].index = 0;
relationObj[`${behindfix}`].timer = null;
});
useEffect(() => {
startMove(sRef);
return () => clearInterval(relationObj[`${behindfix}`].timer);
}, [curText, array, index]);
const startMove = (rollingText) => {
if (!rolling) return;
if (ref && ref.current && rollingText && rollingText.current && curText) {
const { clientWidth } = ref.current;
const span = rollingText.current;
const { offsetWidth } = span;
const rollingDistance = offsetWidth - clientWidth;
span.style.transform = `translateX(-${0}px)`;
const animationName = `rolling${
behindfix + new Date().getTime().toString()
}`;
const animationTime =
rollingDistance > 0
? Math.ceil(rollingDistance / (30 * speedTimes))
: waitSecond - waitNextSecond;
// css3 动画规则
const rollingTextAnimation = `@keyframes ${animationName} {
0% {
transform: translateX(0);
-webkit-transform: translateX(0);
}
100% {
transform: translateX(-${rollingDistance}px);
-webkit-transform: translateX(-${rollingDistance}px);
}
}`;
const { length } = document.styleSheets[0].cssRules;
if (!relationObj[`${behindfix}`].cssRulerIndex) {
relationObj[`${behindfix}`].cssRulerIndex = length;
document.styleSheets[0].insertRule(
rollingTextAnimation,
relationObj[`${behindfix}`].cssRulerIndex
);
} else {
// 添加新规则前，删除原来的规则
document.styleSheets[0].deleteRule(
relationObj[`${behindfix}`].cssRulerIndex
);
document.styleSheets[0].insertRule(
rollingTextAnimation,
relationObj[`${behindfix}`].cssRulerIndex
);
}
span.style.animation = `${animationName} ${
animationTime === waitSecond ? 0 : animationTime
}s linear`;
if (rollingDistance > 0)
span.style.transform = `translateX(-${rollingDistance}px)`;
relationObj[`${behindfix}`].timer = setInterval(() => {
relationObj[`${behindfix}`].index += 1;
setText(array[relationObj[`${behindfix}`].index % array.length]);
// 针对只有一条数据的情况，特殊处理
if (array.length === 1) {
setIndex(relationObj[`${behindfix}`].index);
}
}, animationTime * 1000 + waitNextSecond * 1000);
} else {
relationObj[`${behindfix}`].timer = setInterval(() => {
setText(array[relationObj[`${behindfix}`].index % array.length]);
}, 0);
}
};
return (
<div className={cx("rolling-text-contain")} ref={ref} {...otherProps}>
<span className={cx("rolling-text")} ref={sRef}>
{curText}
</span>
</div>
);
}
);
export default Marquee;

1
2
3
4
5
6
7
8
9
10
11
.rolling-text-contain {
position: relative;
overflow: hidden;
white-space: nowrap;
}
.rolling-text {
display: inline-block;
height: 100%;
color: #ffffff;
font-size: 12px;
}

1
2
3
4
5
6
<Marquee array={
['asdkfjlasdkf',
'start playing. i want to bet wala. how about you, guys.start playing. i want to bet wala. how about you, guys.',
'kuhdfjand68790-987']
}
/>