sdudoc项目实训-网站首页

最新推荐文章于 2024-08-23 08:23:38 发布

Chi Z犬里

最新推荐文章于 2024-08-23 08:23:38 发布

阅读量113

点赞数

分类专栏：项目实训-sdudoc 2021SC@SDUSC 文章标签： react.js javascript typescript

本文链接：https://blog.csdn.net/Janchee/article/details/125117412

版权

本文介绍了如何使用React.js和JavaScript实现一个具有淡入淡出效果的网站首页，旨在帮助用户快速理解和使用系统。

摘要由CSDN通过智能技术生成

网站首页作为系统入口以及项目简介，帮助用户快速了解和上手该系统。

实现：
（同时实现组件配合滑动的淡入淡出效果）
在这里插入图片描述

代码示例：

在这里插入图片描述
banner部分：

import React from 'react';
import {
    Button } from 'antd';
import {
    DownOutlined } from '@ant-design/icons';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import {
    isImg } from './utils';

class Banner extends React.PureComponent {
   
  render() {
   
    const {
    ...currentProps } = this.props;
    const {
    dataSource } = currentProps;
    delete currentProps.dataSource;
    delete currentProps.isMobile;
    return (
      <div {