×

小玩具:简易弹幕效果

96
大春春
2017.01.08 17:04* 字数 925

弹幕是最近几年流行起来的东西,现在基本上大的视频网站都配备有弹幕的功能,比如bilibili,优酷等,那么这种功能是怎么实现的呢?

首先弹幕的字色是随机的,然后是有动画效果移动的,并且出现的Y轴位置不一样,考虑好这些特点后就可以开始制作了

今天就来做一个单机版的弹幕吧。

要看源码的直接拉到最底下

第一步、写html和css,让弹幕框初现原形

这一步需要有一个发射弹幕的按钮和一个清理弹幕的按钮,当然一个弹幕框也是必不可少的,此外还需要一个输入框,用来输入弹幕的内容;

写html和css

第二步、获取按钮、输入框和弹幕框的dom节点

获取节点

第三步、创建随机色函数

大家都知道在css中,颜色可以用十六位进制的#000000形式表示,也可以用英文单词表示,当然还有rgb形式表示。但是在创建随机颜色这里,最简单的是用rgb形式的颜色表达,原因是他的表示全是纯数字,并且范围在,所以可以使用数学对象的Math.random()单独为r、g、b各创建一个范围在(0~255)内的随机整数,在返回出一个字符串,方便后面添加;

创建随机色函数

第四步、创建随机top的函数

在这步创建随机top的函数,我们需要考虑弹幕框的高度,然后创建出在弹幕框高度以内的一个整数随机数,比如我的就是这样设定的:

创建随机top

第五步、创建一个返回animation属性字符串的函数,用以备用

这一步需要先了解animation属性,可以看看我的这一篇文章(CSS3中的animation动画属性简介
在这一步,因为我想要弹幕划过屏幕的时间也是随机的,单范围不需要太大的,所以我制定了(15~25)秒这样的时间范围:

制定animation属性函数

这一步还需要在css代码中添加@keyframes动画制定代码

第六步、编写逻辑结构

  • 发射弹幕

1.首先,我们需要先给发射按钮绑定click事件,然后让它在点击后创建一个p元素

2.这里我们要获取用户在输入框输入的字符串,可以用node.value得到,再将该字符串插入到p元素中,可以用使用node.innerText插入,结合起来就是node.innerText = node.value

3.使用node.style为新创建的p元素添加样式,注意有中横线链接的样式名要改驼峰写法:

为弹幕元素p添加样式

4.点击后去掉输入框的字样,并且将创建的弹幕p元素node.appendChild()方法添加进弹幕框成为弹幕框的子元素:

  1. 这下子我们就可以发射弹幕了,来看看整个事件是怎么样的吧:


  • 清理弹幕
    清理弹幕实现原理就很简单了,直接把弹幕框里面的HTML变迁全部清理掉就好了,这里使用了node.innerHTML = 空字符串的方法;
清理弹幕

这里就是总体的效果还有源码地址

源码地址

效果图:

弹幕效果

文章著作权归饥人谷_大春和饥人谷所有,转载须说明来源

小作品
Web note ad 1