基于React.js实现简单的文字跑马灯效果

刚好手上有一个要实现文字跑马灯的react项目,然后ant-design上面没有这个组件,于是只能自己手撸一个。

我想到的最简单的方法,就是定位啦,定时移动这个文字块不就跑起来了。

需要注意的是,要判断文字的宽度,当文字超出屏幕的宽度的时候再动起来,我用的是hook的写法,要在销毁页面的时候清掉定时器。定时器要放在useRef里面。

const timer = useRef<any>(null);
const [left, setLeft] = useState(0);
const contentRef = useRef<any>(null);
useEffect(() => {
    // 当监听到文字变化时,一定要先清掉定时器,如果文字较短的话就不会再启动
    if (timer.current) {      clearInterval(timer.current);    }
    const contentDom = contentRef.current;
    if (contentDom) {
      const obj = contentDom.getBoundingClientRect();
      // 判断文字框长度
      if (obj.width > props.width) {
         timer.current = setInterval(() => {
         // 注意state是负数,Ï当数字移动到最后的时候,下一次从父元素的宽度开始,看起来就是一直在向左移动
         // 文字框的宽度要时时获取
         // setLeft要从回调里面获取,不然不能时时更新
         setLeft((state) =>-state >= contentDom.getBoundingClientRect().width ? props.width : state - 1,          );        }, 100);
      } else {        setLeft(0);      }
    }
}, [props.children]);
useEffect(() => {
          // 注销时,清空定时器
          return () => {
            if (timer.current) {        clearInterval(timer.current);      }
          };
}, []);
return (<div className={styles.noticeCompWrapper} style={{ width: props.width, ...props.style }}>
          <div ref={contentRef} className={styles.noticeContent} style={{ left }}>        {props.children}      </div>
        </div>  );

.noticeCompWrapper {
    height: 40px;
    line-height: 40px;
    overflow: hidden;
     position: relative;
    .noticeContent {
       white-space: nowrap;
       position: absolute;
    }
}

这移动效果还可以吧,时间间隔一定要小,不然就会一卡一卡的

第一种很容易吧,其实最开始是想用纯css来写的,考虑到css没法获取自适应宽度,咋判断文字移动到末尾了?但是我觉得,css肯定是可以办到,于是我继续探索...

animation走起,,,咱们假设外边框长120px,文字长240px

@keyframes run {
0% {    transform: translateX(0);  }
50% {    transform: translateX(-240px);  }
50% {    transform: translateX(120px);  }
100% {    transform: translateX(-240px);  }
}

总感觉有啥不对,这个字咋往回跑,这感觉跑来跑去的。。。

平心静气~没事没事,不就是个小bug么~

仔细思考一下,这只要写两个动画就解决了,因为其实除了第一次不同,后面都是从右边进入视角的有木有。

@keyframes run {
from {    transform: translateX(0);  }
to {    transform: translateX(-240px);  }
}
@keyframes loop {
from {    transform: translateX(120px);  }
to {    transform: translateX(-240px);  }
}

咱们用的时候,第一个走一遍就好了,循环后面那个:

.textContent {
white-space: nowrap;
animation-name: run, loop;
animation-duration: 5s;
animation-iteration-count: 1, infinite;
animation-timing-function: linear;
position: relative;
}

look,是不是好多了~

接下来就是文字长度的问题了~咋们咋控制他要不要动啊?还有移动的时间和距离咋控制??

首先动画时间,less肯定是算不出来了,那我们就在js外面计算一下哈~方法和上面类似,要取元素的宽度。

const contentRef = useRef<any>(null);
const [duration, setDuration] = useState('');
useEffect(() => {
  const dom = contentRef.current;
  if (dom) {
    const { width } = dom.getBoundingClientRect();
    if (width > props.width) {
      // 我这边取的速度是按一个字的大小
      setDuration(width / 16 + 's');
    } else {
       // 小于宽度的时候清掉时间
       setDuration('');
    }
  } else {      setDuration('');    }
}, [props.children]);
return (<div style={{ width: props.width, ...props.style }} className={styles.wrapper}    >
  <div
    className={styles.textContent}
    ref={contentRef}
    // 计算好动画时间传过去
    style={{
            animationDuration: duration,
             // 第二个动画等第一个执行之后执行
             animationDelay: duration? `0s, ${duration}` :'',
        }}
   >
  {props.children}
  </div>
</div>  );

完整的样式

// 设置父元素的宽度
@width: 120px;
.wrapper {
  position: relative;
  overflow: hidden;
  width: @width;
  height: 40px;
  line-height: 40px;
  .textContent {
      white-space: nowrap;
      animation-name: run, roop;
      animation-iteration-count: 1, infinite;
      animation-timing-function: linear;
      // 这个很重要,不然宽度就和父元素一样
      position: absolute;
   }
}
@keyframes run {
from {    transform: translateX(0);  }
to {
    // 这个100% 是文字的
    transform: translateX(-100%);
   }
}
@keyframes roop {
from {    transform: translateX(@width);  }
to {    transform: translateX(-100%);  }
}

不错不错,这样就解决了时间和制动的问题了~

不过...,这还不够完美。NOT PERFACT!

这个父元素的宽度是不是写死了,要是要使用的话只能手动改@width,咱有木有办法通过js传过来?你知道怎么改更好么?

哈哈,咱们基本上已经完成了这种简单的从左向右移动的文字跑马灯(为自己鼓掌),接下来就是升级版的了,跑马灯plus。实现一个向上滚动的跑马灯。

咱们在第一步的基础上来做一个向上滚动的跑马灯plus。

我们加一个向上的按钮,可以控制文字跑动的方向,当然向右向下同理~这里就不做了

 <>
<div
    className={styles.noticeCompWrapper}
    style={{ width: props.width, ...props.style, marginBottom: 10 }}
>
        <div
           ref={contentRef}
           className={styles.noticeContent}
           style={{ left, top,
           // 换行的逻辑一定要加上,上下移动的需要换行
           whiteSpace: direction == DirectionEnum.左 ? 'nowrap' : 'initial',
           }}
         >
        {props.children}
        </div>
</div>
<Space>
<Button onClick={() => { setDirection(DirectionEnum.左); setTop(0); }}> 向左</Button>
<Button onClick={() => { setDirection(DirectionEnum.上); setLeft(0); }}> 向上</Button>
</Space>
</>

判断下移动方向

useEffect(() => {
  // 当监听到文字变化时,一定要先清掉定时器,如果文字较短的话就不会再启动
  if (timer.current) {      clearInterval(timer.current);    }
  const contentDom = contentRef.current;
  if (contentDom) {
    const obj = contentDom.getBoundingClientRect();
    if (direction == DirectionEnum.左) {
        // 同上...
    } else if (direction == DirectionEnum.上) {
       // 向上
      if (obj.height > 40) {
        timer.current = setInterval(() => {
          setTop(state =>-state >= contentDom.getBoundingClientRect().height ? 40 : state - 1);
        }, 30);
      }
    } else {
      setLeft(0);
      setTop(0);
    }
  }
}, [props.children, direction]);

看一下成果:

这种单行滚动的效果,能不能实现一下?就是滚动一行停留一段时间再继续滚动

这个也比较简单,我用我上面的方法在引申一下,你们也可以用其他方法,animatioin也可以。

我在定时器里面在加一个延时timeout

timer.current = setInterval(() => {
   setTop(state => {
     // 当行数是40的整倍数的时候延迟执行移动
     if ((state - 1) % 40 == 0) {
       setTimeout(() => {
         setTop(state1 =>  -state1 >= contentDom.getBoundingClientRect().height ? 40 : state1 - 1);
       }, 500);
       return state;
     } else {
       return -state >= contentDom.getBoundingClientRect().height? 40 : state - 1;
     }
   });
}, 30);

效果:

以上就是基于React.js实现简单的文字跑马灯效果的详细内容,更多关于React文字跑马灯的资料请关注我们其它相关文章!

(0)

相关推荐

  • js实现文字跑马灯效果

    本示例将实现文字跑马灯效果:文字超过显示宽度每间隔1s自动向左滚动显示,话不多说,请看代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,in

  • JS实现状态栏跑马灯文字效果代码

    本文实例讲述了JS实现状态栏跑马灯文字效果代码.分享给大家供大家参考,具体如下: 这款状态栏跑马灯,文字跑动的定义在数组内,自己可修改内容.现在的IE8貌似不兼容,有缺憾的代码,欢迎JS爱好者修正,修正请发回一份.状态栏为效果显示区. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ztlpmd-txt-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>间隔状态栏跑马灯</T

  • javascript实现文字跑马灯效果

    本文实例为大家分享了js实现文字跑马灯效果的具体代码,供大家参考,具体内容如下 思路: 1.判断文字的长度和容器的长度,如果文字长度大于容器长度,则开始滚动,否则不滚动. 2.获取滚动条到元素左边的距离,递归滚动,直到滚动后的距离等于文字的长度退出递归. 判断文字和容器的长度可以通过offsetWidth来判断.如果文字长度大于容器长度,则开始滚动. window.onload = function(){ //比较文字与盒子长度的大小 if(boxWidth>textWidth){ return

  • Vue实现跑马灯样式文字横向滚动

    本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤: 1.可以自己封装一个组件,也可以自己写,也可以复制以下代码 2.封装完成以后要在所需的组件中引入,注册,并使用 代码: 封装一个专门用来实现跑马灯效果的组件marquee组件 <template> <!-- 跑马灯组件 --> <div class="marquee-wrap" ref="marquee

  • 基于React.js实现简单的文字跑马灯效果

    刚好手上有一个要实现文字跑马灯的react项目,然后ant-design上面没有这个组件,于是只能自己手撸一个. 我想到的最简单的方法,就是定位啦,定时移动这个文字块不就跑起来了. 需要注意的是,要判断文字的宽度,当文字超出屏幕的宽度的时候再动起来,我用的是hook的写法,要在销毁页面的时候清掉定时器.定时器要放在useRef里面. const timer = useRef<any>(null); const [left, setLeft] = useState(0); const conte

  • jQuery实现参数自定义的文字跑马灯效果

    本文为大家分享了jQuery实现文字跑马灯效果的具体代码,供大家参考,具体内容如下 一.明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置的,包括文字跑马灯的速度和距离下次出现的间隔.具体需求见下图: 这样一来实现这个功能就会有点麻烦了,需要烧烧脑细胞了. 二.具体实现过程 HTML中只需要如下几行代码 <div id="swiper"

  • 小程序文字跑马灯效果

    本文实例为大家分享了小程序文字跑马灯效果的具体代码,供大家参考,具体内容如下 market.wxml <!--pages/market/market.wxml--> <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style=&qu

  • 微信小程序实现文字跑马灯效果

    本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 效果 wxml <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px

  • Android中使用TextView实现文字跑马灯效果

    通常情况下我们想实现文字的走马灯效果需要在xml文件中这样设置 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:ellipsize="marquee" android:focusable="true" android:

  • js文本框走动跑马灯效果代码分享

    本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本框走动跑马灯代码</title> </

  • Android基于TextView不获取焦点实现跑马灯效果

    本文实例讲述了Android基于TextView不获取焦点实现跑马灯效果.分享给大家供大家参考,具体如下: 1. 写一个类继承TextView package com.example.tt; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; import android.widget.TextView; public class ScrollingText

  • Js和VUE实现跑马灯效果

    本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码,供大家参考,具体内容如下 一.js实现跑马灯 1.效果图 视频上传不了,只能看图片了 2. 设计思路 使用截取字符串的方法,首先获取文本的值,再分别截取文本的第一个字符串和剩余的字符串,然后重新拼接一个新的字符串,最后把这个新字符串赋值给文本,代码如下: var value=cont.innerHTML; var start=value.substring(0,1);//截取第一个字符串 var end=value.substring

随机推荐