下拉刷新
项目详情
navbar_avatar分享
repo_avatar
HelloGitHub 评分
0 人评分
基于 CSS3 Animation 使用 React 构建的弹幕组件
认领
收藏
分享
593
星数
中文
JavaScript
主语言
活跃
2
贡献者
12
Issues
组织
最新版本
68
Forks
协议
更多
rc-bullets image
基于 CSS3 Animation 使用 React 构建的弹幕组件。[演示地址](http://zerosoul.github.io/rc-bullets),支持功能: - 管理弹幕:暂停、隐藏、清屏等 - 设置弹幕:速度、循环次数、延迟播放、自定义动画类型等 ```javascript import React, { useEffect, useState } from 'react'; import BulletScreen, { StyledBullet } from 'rc-bullets'; const headUrl='https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg'; export default function Demo() { // 弹幕屏幕 const [screen, setScreen] = useState(null); // 弹幕内容 const [bullet, setBullet] = useState(''); useEffect(() => { // 给页面中某个元素初始化弹幕屏幕,一般为一个大区块 let s = new BulletScreen('.screen'); // or // let s=new BulletScreen(document.querySelector('.screen)); setScreen(s); }, []); // 弹幕内容输入事件处理 const handleChange = ({ target: { value } }) => { setBullet(value); }; // 发送弹幕 const handleSend = () => { if (bullet) { // push 纯文本 screen.push(bullet); // or 使用 StyledBullet screen.push( <StyledBullet head={headUrl} msg={bullet} /> ); // or 还可以这样使用,效果等同使用 StyledBullet 组件 screen.push({msg:bullet,head:headUrl,color:"#eee" bgColor:"rgba(2,2,2,.3)"}) } }; return ( <main> <div className="screen" style={{ width: '100vw', height: '80vh' }}></div> <input value={bullet} onChange={handleChange} /> <button onClick={handleSend}>发送</button> </main> ); } ```
收录于:
第 45 期

评论

评分:
暂无精选评论