【JS】用React实现上下跑马灯

用React实现上下跑马灯

时倾发布于 今天 08:20

基本思想:

  1. 利用transform:translateY()实现上下滑动,transition控制滑动时间,
  2. 把原数组拼接0下标的数据用于展示,当滑动到最后一个,马上定位到第一个。(最后一个与第一个相同)

代码示例:

// index.jsx

import 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 国际》许可协议

avatar

时倾

把梦想放在心中

185 声望

1.4k 粉丝

0 条评论

得票时间

avatar

时倾

把梦想放在心中

185 声望

1.4k 粉丝

宣传栏

基本思想:

  1. 利用transform:translateY()实现上下滑动,transition控制滑动时间,
  2. 把原数组拼接0下标的数据用于展示,当滑动到最后一个,马上定位到第一个。(最后一个与第一个相同)

代码示例:

// index.jsx

import 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

回到顶部