使用jQuery写一个网站通知公告横向滚动（注：react组件）

关注

原创最新推荐文章于 2026-08-12 16:47:38 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

Java对接（BSC）币安链 | BNB与BEP20的开发实践（三）水龙头 WEB3 这一节我们讲一个币安测试链如何获取到BNB、USDT等BEP20数字货币（水龙头）来让我们前期测试开发。如图：我们将创建的地址填入相应输入框，来获取到测试BNB以及其他BEP20数字币。发币可能需要交易等待，请耐心等待即可，交易完成后，币会到达您的地址内。上一节我们用代码来实现BNB转账、BEP20转账、链上交易监控。2.MetaMask(小狐狸)浏览器插件 🪜。使用EDGE浏览器可以在浏览器直接打开。使用Chrome浏览器，请使用🪜打开。基本工作就绪后，即可进行开发测试。3. 测试区块链浏览器 🪜。阅读详情

前一篇文章写了用纯css3的方法写一个网站上的公告横向滚动；
本篇文章使用jQuery的方法写一个动态横向滚动公告；

ps:本jQuery写在React组件中了；由于React用的时间较短，有代码上的不规范或者不简洁的地方请见谅~

附上代码~~

备注：未对接后台返回数据之前静态，完全没有问题，对接后台数据后出现一些小问题（在componentDidUpdate时将textWidth指向到this上即可），详见下篇文章。


import React from "react";
import * as styles from './notice.less';
import {Icon} from "antd";
import $ from "jquery";
import {ajax} from "../../../framework/tools";


export class Notice extends React.Component{

    marquee(){
        let {addiche, text} = this;
        let scrollWidth = $(addiche).width();
        let textWidth = $(text).width();
        let i = scrollWidth;
        this.timerID = setInterval(function() {
            i--;
            if(i < -textWidth ) {
                i = scrollWidth;
            }
            $(text).animate({'left': i+'px'}, 10);
        }, 10);
    }

    loadPub =()=>{
        ajax.get('/rest/server/get/notice/pub',{},res=>{
            console.log(res);
        })
    };

    componentDidMount(){
        this.loadPub();
        this.marquee();
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    render(){
        return(
            <div ref={(ref)=>{this.addiche = ref;}} className={styles.affiche}>
                <div className={styles.affiche_icon}>
                    <Icon type="sound" />
                </div>
                <div ref={(ref)=>{this.text = ref;}} className={styles.affiche_text}>
                    系统管理员现定于2018年12月17日，对本系统维护更新，届时会停止服务器的运行，请各位使用者互相转达。谢谢配合！
                </div>
            </div>
        )
    }
}


//css（Less）部分
.affiche{
  color: red;
  display: block;
  width: 100%;
  height: 30px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  text-align:left;
  line-height: 30px;

  .affiche_text{
    position: absolute;
    top: 0;
    left: 100%;
    line-height: 30px;
    display: inline-block;
    word-break: keep-all;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .affiche_icon{
    position: absolute;
    top: 0;
    left: 0;
    line-height: 30px;
    color: #2e4799;
    width: 20px;
    height: 100%;
    background: #f7f7f7;
    z-index: 20;
  }
}