水平滚动
demo.less #scroll_x { width: 300px; height: 30px; background-color: #ccc; color: green; position: relative; overflow: hidden; } #scroll_x_text { font-size: 20px; position: absolute; white-space: nowrap; word-wrap: normal; top: 0; } demo.tsx import React, { useEffect, useState } from "react" import './demo.less' const Demo = () => { const [left, setLeft] = useState(9999) const [transform, setTransform] = useState(0) const [transition, setTransition] = useState(`transform 5s linear`) const [stopInterval, setStopInterval] = useState(false) let scrollXStyle = { left, transform: `translateX(${transform}px)`, transition } let timerX const text = 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrtttttttttttttttttttttttyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy' const setPosition = () => { const textWidth = document.getElementById('scroll_x_text')?.clientWidth const fatherWidth = document.getElementById('scroll_x')?.clientWidth setStopInterval(true) if (fatherWidth && textWidth) { setLeft(fatherWidth) if (transform < 0 && ((Math.abs(transform) - fatherWidth) > textWidth)) { setTransition('') setTransform(0) setTimeout(() => { setStopInterval(false) }, 100)} else { setTransition(`transform 5s linear`) setTransform(transform - fatherWidth) setTimeout(() => { setStopInterval(false) }, 5000) } } } useEffect(() => { if (stopInterval) { clearInterval('timerX') } else { timerX = setInterval(setPosition, 1000) } return () => { clearInterval(timerX) } }, [stopInterval]) return <div id="scroll_x"> <div id="scroll_x_text" style={scrollXStyle}> {text} </div> </div> } export default Demo 纵向滚动 demo1.less #scroll_y { width: 300px; height: 60px; background-color: #ccc; color: green; position: relative; top: 0px; left: 300px; overflow: hidden; } #scroll_y_text { position: absolute; word-wrap: break-word; top: 50px; left: 0; font-size: 20px; line-height: 30px; color: green; } demo.tsx import React, { useEffect, useState } from "react" import './demo1.less' const Demo = () => { const [top, setTop] = useState(9999) const [width, setWidth] = useState(9999) const [transform, setTransform] = useState(0) const [transition, setTransition] = useState('transform 5s linear') const [stopInterval, setStopInterval] = useState(false) let scrollYStyle = { width, top, transform: `translateY(${transform}px)`, transition } let timerY const text = 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrtttttttttttttttttttttttyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy' const setPosition = () => { const fatherWidth = document.getElementById('scroll_y')?.clientWidth const textHeight = document.getElementById('scroll_y_text')?.clientHeight const fatherHeight = document.getElementById('scroll_y')?.clientHeight fatherWidth && setWidth(fatherWidth) setStopInterval(true) if (fatherHeight && textHeight) { setTop(fatherHeight) if (transform < 0 && ((Math.abs(transform) - fatherHeight) > textHeight)) { setTransition('') setTransform(0) setTimeout(() => { setStopInterval(false) }, 100)
} else { setTransition('transform 5s linear') setTransform(transform - fatherHeight) setTimeout(() => { setStopInterval(false) }, 5000) } }
} useEffect(() => { if (stopInterval) { clearInterval('timerY') } else { timerY = setInterval(setPosition, 1000) } return () => { clearInterval(timerY) } }, [stopInterval]) return <div id="scroll_y"> <div id="scroll_y_text" style={scrollYStyle}> {text} </div> </div> } export default Demo 文字渐变交替显示 demo3.less #gradient_father { width: 300px; height: 60px; font-size: 12px; background-color: #ccc; color: green; position: relative; top: 200px; left: 300px; overflow: hidden; } #gradient_text_top { position: absolute; word-wrap: break-word; top: 50px; left: 0; font-size: 20px; line-height: 30px; } #gradient_text_bottom { position: absolute; word-wrap: break-word; top: 50px; left: 0; font-size: 20px; line-height: 30px; } demo.tsx import React, { useEffect, useState } from "react" import './demo3.less' const Demo = () => { const [isFirst, setIsFirst] = useState(true) const [opacityFirst, setOpacityFirst] = useState(1) const [opacitySecond, setOpacitySecond] = useState(0) const [topFirst, setTopFirst] = useState(200) const [topSecond, setTopSecond] = useState(200) const [width, setWidth] = useState(0) const [transformFirst, setTransformFirst] = useState(0) const [transformSecond, setTransformSecond] = useState(0) const [transition, setTransition] = useState('opacity 3s linear') const [stopInterval, setStopInterval] = useState(false) let gradientTStyle = { width, top: topFirst, transform: `translateY(${transformFirst}px)`, transition, opacity: opacityFirst } let gradientBStyle = { width, top: topSecond, transform: `translateY(${transformSecond}px)`, transition, opacity: opacitySecond } let gradientTimer const text = 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrtttttttttttttttttttttttyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ' const setPosition = () => { const fatherWidth = document.getElementById('gradient_father')?.clientWidth const textHeight = document.getElementById('gradient_text_top')?.clientHeight || document.getElementById('gradient_text_bottom')?.clientHeight const fatherHeight = document.getElementById('gradient_father')?.clientHeight fatherWidth && setWidth(fatherWidth) setStopInterval(true) if (fatherHeight && textHeight) { if (isFirst) { setTopFirst(fatherHeight + fatherHeight) setTopSecond(fatherHeight + fatherHeight) } if (transformFirst < 0 && (Math.abs(transformFirst) > textHeight)) { setTransition('') setTransformFirst(0) setTransformSecond(0) setIsFirst(true) setTimeout(() => { setStopInterval(false) }, 100)
} else { setTransition('opacity 3s linear') if (isFirst) { setTransformFirst(transformFirst - fatherHeight) setIsFirst(false) } if (opacitySecond === 0) { setTransformSecond(transformSecond - fatherHeight - fatherHeight) } if (opacityFirst === 0) { setTransformFirst(transformFirst - fatherHeight - fatherHeight) } setOpacityFirst(opacityFirst === 0 ? 1 : 0) setOpacitySecond(opacitySecond === 0 ? 1 : 0) setTimeout(() => { setStopInterval(false) }, 3000) } }
} useEffect(() => { if (stopInterval) { clearInterval('gradientTimer') } else { gradientTimer = setInterval(setPosition, 2000) } return () => { clearInterval(gradientTimer) } }, [stopInterval]) return <div id="gradient_father"> <div id="gradient_text_top" style={gradientTStyle}> {text} </div> <div id="gradient_text_bottom" style={gradientBStyle}> {text} </div> </div> } export default Demo 标签：文字,动画,滚动,text,fatherHeight,transform,setStopInterval,useState,const From： https://www.cnblogs.com/zscxy/p/17958138