简单写了一个能用的弹幕 js——N.js

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2161 天前的主题，其中的信息可能已经有所发展或是发生改变。

Banner

最近看到了 CSS3 的 animation，想着能不能写个滚动弹幕，结果想不到一发不可收拾，写了个 N.js 出来...
算是用比较简单粗暴的方式实现了基础的弹幕。

基本使用方法在 Readme 有一定的介绍，另外还装配了一个简单的 demo （配合浏览器 Console 更佳）.
因为是在高中课余挤出时间学的，我在写 js 这方面还是一条咸鱼，望多多包涵...

PS: Demo 图片是在 Wallhaven 找的.

第 1 条附言 · 2018-12-15 22:02:16 +08:00

目前看来如果弹幕数量过多，只有 PC 端能支撑

第 2 条附言 · 2018-12-15 23:24:50 +08:00

已经更新DEMO，标注了弹幕处于的状态
到中间停了可能并不是卡死，而是暂停。
如果有浏览器卡死的状况望大家提提意见~

第 3 条附言 · 2018-12-16 19:36:26 +08:00

目前已经完善地差不多了，希望大家能给个Star.
I'll appreciate if you do that.

7 条回复 • 2018-12-16 12:45:32 +08:00

chinvo

2018-12-15 21:03:55 +08:00 via iPhone

safari 上滚到一半就卡死了

SomeBottle

2018-12-15 21:14:50 +08:00

@chinvo #1 滚动弹幕是用 css3 动画实现的，可能 demo 发射数量太多了吧..还是说 css3 有什么优化写法

rabbbit

2018-12-15 21:16:33 +08:00

tygm

2018-12-15 21:53:45 +08:00 via Android

uc 浏览器也走一半停了安卓

SomeBottle

2018-12-15 23:05:19 +08:00

@rabbbit #3 我已经把 demo 的弹幕删减了一些，目前手机 Chrome 测试很流畅

@tygm #4 demo 中确实有一段暂停弹幕的演示，不见得是卡顿

dyxang

2018-12-15 23:21:29 +08:00

支持，高三默默的注视着……

chungzhao

2018-12-16 12:45:32 +08:00

加油！