【JS】用React实现上下跑马灯
用React实现上下跑马灯
时倾发布于 今天 08:20
基本思想:
- 利用transform:translateY()实现上下滑动,transition控制滑动时间,
- 把原数组拼接0下标的数据用于展示,当滑动到最后一个,马上定位到第一个。(最后一个与第一个相同)
代码示例:
// index.jsximport React, { useRef, useState } from 'react';
import { useInterval } from 'ahooks';
import './style.scss';
function Marquee() {
const marqueeRef = useRef(null);
const content = [
'鸣谢生命有你参与,笑纳我的邀请',
'青春兵荒马乱,我们潦草地离散',
'我对你付出的青春 这么多年',
'我的心事,蒸发成云,再下场雨却舍不得淋湿你',
];
useInterval(() => {
if (!marqueeRef || !marqueeRef.current) return;
const { height } = marqueeRef.current.getBoundingClientRect();
const translateYItem = Math.floor(height / (content.length + 1));
const nextIndex = index + 1;
marqueeRef.current.style.transform = `translateY(-${
translateYItem * nextIndex
}px)`;
marqueeRef.current.style.transition = 'transform 1s';
if (index >= content.length - 1) {
// 最后一个
setTimeout(() => {
setIndex(0);
marqueeRef.current.style.transform = 'translateY(0px)';
marqueeRef.current.style.transition = 'transform 0s';
}, 1000);
} else {
setIndex(nextIndex);
}
}, 2000);
return (
<div className="marquee-container">
<div className="marquee-wrapper">
<div className="marquee-content" ref={marqueeRef}>
{
content.concat(content[0]).map((itm, i) => (
<div key={`${itm}-${i}`} className="marquee-content-itm">
{itm}
</div>
))
}
</div>
</div>
</div>
);
}
// style.scss.marquee-container {
width: 100%;
.marquee-wrapper {
height: 17px;
overflow: hidden;
.marquee-content {
transform: translateY(0);
transition: transform 1s;
display: flex;
flex-direction: column;
align-items: flex-start;
.marquee-content-itm {
line-height: 17px;
font-size: 12px;
color: #5e1400;
}
}
}
}
javascript前端
阅读 67发布于 今天 08:20
本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
时倾
把梦想放在心中
185 声望
1.4k 粉丝
时倾
把梦想放在心中
185 声望
1.4k 粉丝
宣传栏
目录
基本思想:
- 利用transform:translateY()实现上下滑动,transition控制滑动时间,
- 把原数组拼接0下标的数据用于展示,当滑动到最后一个,马上定位到第一个。(最后一个与第一个相同)
代码示例:
// index.jsximport React, { useRef, useState } from 'react';
import { useInterval } from 'ahooks';
import './style.scss';
function Marquee() {
const marqueeRef = useRef(null);
const content = [
'鸣谢生命有你参与,笑纳我的邀请',
'青春兵荒马乱,我们潦草地离散',
'我对你付出的青春 这么多年',
'我的心事,蒸发成云,再下场雨却舍不得淋湿你',
];
useInterval(() => {
if (!marqueeRef || !marqueeRef.current) return;
const { height } = marqueeRef.current.getBoundingClientRect();
const translateYItem = Math.floor(height / (content.length + 1));
const nextIndex = index + 1;
marqueeRef.current.style.transform = `translateY(-${
translateYItem * nextIndex
}px)`;
marqueeRef.current.style.transition = 'transform 1s';
if (index >= content.length - 1) {
// 最后一个
setTimeout(() => {
setIndex(0);
marqueeRef.current.style.transform = 'translateY(0px)';
marqueeRef.current.style.transition = 'transform 0s';
}, 1000);
} else {
setIndex(nextIndex);
}
}, 2000);
return (
<div className="marquee-container">
<div className="marquee-wrapper">
<div className="marquee-content" ref={marqueeRef}>
{
content.concat(content[0]).map((itm, i) => (
<div key={`${itm}-${i}`} className="marquee-content-itm">
{itm}
</div>
))
}
</div>
</div>
</div>
);
}
// style.scss.marquee-container {
width: 100%;
.marquee-wrapper {
height: 17px;
overflow: hidden;
.marquee-content {
transform: translateY(0);
transition: transform 1s;
display: flex;
flex-direction: column;
align-items: flex-start;
.marquee-content-itm {
line-height: 17px;
font-size: 12px;
color: #5e1400;
}
}
}
}
以上是 【JS】用React实现上下跑马灯 的全部内容, 来源链接: www.h5w3.com/114187.html
得票时间