You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.8 KiB
48 lines
1.8 KiB
import React, { useRef, useEffect, useState } from 'react'
|
|
import moment from 'moment'
|
|
import './textScroll.less'
|
|
|
|
function TextScroll (props) {
|
|
const { content, duration } = props
|
|
const [showContent, setShowContent] = useState('1231231')
|
|
|
|
useEffect(() => {
|
|
let repeatTime = moment()
|
|
let refreshTime = moment()
|
|
const scroll = () => {
|
|
let contentParent = document.getElementById('marquee_box')
|
|
document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px'
|
|
// 控制频率
|
|
if (moment().diff(refreshTime) > 1000 / 60) {
|
|
const contentP = document.getElementById('contentP')
|
|
// 静态等待时间
|
|
if (moment().diff(repeatTime) > 1000 * 1.5) {
|
|
contentP.style.visibility = 'visible'
|
|
}
|
|
if (moment().diff(repeatTime) > 1000 * 3) {
|
|
contentParent.scrollLeft = contentParent.scrollLeft + 1
|
|
}
|
|
if (contentParent.scrollLeft >= contentP.clientWidth + 24) {
|
|
contentParent.scrollLeft = 0
|
|
repeatTime = moment()
|
|
setShowContent('asdasd' + Math.random())
|
|
contentP.style.visibility = 'hidden'
|
|
}
|
|
refreshTime = moment()
|
|
}
|
|
window.requestAnimationFrame(scroll)
|
|
}
|
|
window.requestAnimationFrame(scroll)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="marquee_box" id='marquee_box' style={{ overflow: 'hidden' }} >
|
|
<p style={{ position: 'relative', left: 24 }}>
|
|
<p id='contentP' style={{ display: 'inline-block', visibility: 'hidden' }}>{showContent}</p>
|
|
<p id='contentPMakeUp' style={{ width: 0, display: 'inline-block' }}></p>
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(TextScroll)
|
|
|