JavaScript|JavaScript css3实现简单视频弹幕功能
本文尝试写了一个demo模拟了最简单的视频弹幕功能。
思路：
设置一个和所播放的video的大小一致，把这个div标签蒙在video上面用于放置弹幕。在video的右边放一个
- 列表用于显示弹幕列表。
- 标签加入到ul中。
代码：
Title - 锐客网 .mainBody{margin: 10px auto; text-align: center; font-family: arial; position:relative; }.send{width:700px; margin:0px auto; text-align:left; }.my-msg{width:85%; height:35px; }.my-btn{background-color: #ccd0d7; border-radius: 8px; width: 50px; height: 35px; margin-left:30px; border:1px solid#00a1d6; }.my-list{display:inline-block; vertical-align: top; border:1px solid #ccd0d7; width:200px; height:450px; overflow: auto; }.my-tm{position:absolute; top:0px; height:366px; width: 710px; overflow:hidden; }.rtol{position:absolute; display: inline-block; height:28px; overflow: hidden; font-size:24px; color:#fff; left:720px; -moz-transition:left 4s linear; -webkit-transition:left 4s linear; -o-transition:left 4s linear; }ul{text-align: left; list-style-type:none; margin-top:0px; padding-left: 8px; }li span {text-align: left; color: #99a2aa; }~弹幕~
效果：
文章图片
虽然这样写很简单，但是有个很大的问题就是transition过渡left属性不能暂停，所以自然这个transition动画就只能等它执行完。或者说每个标签的移动都用interval定时器来完成移动。不过这样写就要复杂一些。
【JavaScript|JavaScript css3实现简单视频弹幕功能】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 事件代理
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 数组常用方法一
- 人脸识别|【人脸识别系列】| 实现自动化妆
-
屏幕上面的弹幕，把内容放在标签里面，一般一行字都是从左边飞到右边， 为了简单起见，这个移动就用了CSS3 的transition 属性。position设置为absolute,
那么就用的transition过度left属性，实现弹幕的移动。当然要注意设置其父元素的样式 overflow:hidden; 这样当字体飞出去的时候，就会隐藏飞出去的部分。
当点击发送的时候，获取input中的内容、当前日期、视频播放的进度video.currentTime，把这个内容作为一个对象存入一个数组中。把放置弹幕的span标签加入到div蒙版里，设置它的left，transition就会从当前left过度到下一个left，所以实现了移动。过渡完之后这个span标签就没用了，用removeChild把它中父元素中移除。同时把生成的
