原生JS实现移动端弹幕（虎牙，斗鱼简易版）

话不多说，老规矩，先上Demo 点此预览

实现思路：

从输入框获取输入信息
生成弹幕节点
弹幕从屏幕一侧逐帧移动到另一侧
移动完毕，删除弹幕节点

- 首先是界面布局的实现CSS

*{padding: 0;margin: 0;}html,body{height: 100%;user-select: none;}.screen{overflow: hidden;position: relative;height: 100%;background-color: rgba(249, 249, 249, 0.78);}.top{position: absolute;top:0;height: 80px;width: 100%;line-height: 80px;background-color: #ffffff;text-align: center;font-size: 35px;font-weight: bold;color: rgba(2, 2, 5, 0.87);box-shadow: 17px -5px 40px #6d6a6a8f}.top span{position: absolute;left: 55px;color: #7c22d6;font-size: 25px;}.send{position:absolute;bottom: 0;width:100%;height:240px;line-height:240px;background-color: #ffffff;text-align: center;box-shadow: 17px 11px 40px #6d6a6a8f;}.input{position: absolute;left:50%;top:50%;margin: -65px -446px;font-size: 25px;}.text{float: left;width: 584px;height: 74px;border: none;border-radius:109px;font-size: 35px;background-color: rgba(17, 22, 45, 0.04);}.btn{float:left;margin-left: 30px;height: 74px;width: 74px;background-color: rgba(135, 17, 208, 0.88);line-height: 74px;font-size: 35px;color: #eeeeee;cursor: pointer;border-radius:22px;box-shadow:6px 7px 12px -1px #968f96db;}.say{float: right;margin-left: 30px;width: 160px;height: 91px;font-size: 38px;font-weight: bold;line-height: 91px;color: #9f2dee;cursor: pointer;border-radius:62px;}.s_show div{position: absolute;font-size: 40px;font-weight: bold;color: rgba(3, 5, 2, 0.5);}.btn:hover{float: left;margin-left: 32px;width: 65px;background-color: rgba(31, 208, 185, 0.88);line-height: 65px;font-size: 35px;color: #eeeeee;cursor: pointer;border-radius:15px;}

html界面的实现

<div class="screen"><div class="top">Live Show</div><div class="send"><div class="input"><input type="text" class="text" placeholder="    Say   Something   ..."><div class="btn" id="btn"></div><div class="say">SEND</div></div></div><div class="s_show"><div>让开！挡到我用无限屏了</div><div>主播求微信</div><div>来了老弟</div><div>7777777777777777777777777</div><div>求求你，不要秀了</div><div>这也太真实了吧</div></div>
</div>

js的实现

(function () {//获取所有需要的节点let sShowList = document.querySelectorAll('.s_show div'),oSend = document.querySelector('.send'),oShow = document.querySelector('.s_show'),oText = document.querySelector('.text'),otop = document.querySelector('.top'),oBtn = document.querySelector('.btn'),oTime = 0,//初始化点击时间，用来限制点击频率waitTime = 3;oBtn.onclick = function () {if (new Date() - oTime > 3000 && oText.value) {//点击间隔大于3秒let Div = document.createElement('div');Div.innerHTML = oText.value;oShow.appendChild(Div);//添加弹幕节点init(Div);//初始化弹幕效果oTime = new Date();}};for (i = 0; i < sShowList.length; i++) {//遍历所有已有弹幕节点，初始化init(sShowList[i])}function init(obj) {var screenHeight = document.documentElement.clientHeight,screenWidth = document.documentElement.clientWidth,//屏幕宽高sendHeight = oSend.clientHeight,//输入界面高度topHeight = otop.clientHeight,//标题栏高度height = screenHeight - sendHeight - obj.clientHeight - topHeight,//弹幕显示区域高度width = screenWidth - obj.clientWidth;obj.style.top = Math.random() * height + topHeight + 'px';//+topHeight 是为了让弹幕不被标题栏遮住obj.style.left = width + 'px';move(obj, width);}//动画效果function move(obj, width) {if (width > -obj.clientWidth) {width -= 2;obj.style.left = width + 'px';requestAnimationFrame(function () {move(obj, width);});//生成动画，2px移动} else {oShow.removeChild(obj);//如果弹幕显示宽度小于0—obj.width ,移除该节点。}}})();

为了防止频繁发送，可以给发送时间添加定时器。通过与上次点击的时间差，判断是否进行弹幕的获取。
具体注释都已经在上面代码中进行标注讲解

最后，预览地址blogai.cn

原生JS实现移动端弹幕（虎牙，斗鱼简易版）相关推荐

原生JS实现移动端模块的左右滑动切换效果，基于vue、stylus
原生JS实现移动端模块的左右滑动动画效果,基于vue.stylus 大概实现方案: 手指touch屏幕的整个过程,会派发touchstart.touchmove.touchend三个事件,对这三个事件 ...
html移动端选择器插件,原生js实现移动端选择器插件
原生js实现移动端选择器插件前言插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star ? 预览准备首先在页面中 ...
原生JS实现移动端选择器插件
原生js实现移动端选择器插件仓库地址在线预览(记得将浏览器切换到手机模式) 预览准备首先在页面中引入css,js文件每次需要弹出该组件时通过new一个实例来生成,代码如下: var data ...
移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
pc端html轮播带滑块,原生js实现移动端+pc端轮播插件
slide.js 原生js写的轮播兼容 pc+移动端插件,支持轮播速度,轮播内容,轮播间隔,手势灵敏度自定义,导航圆点点击跳转,手势滑动. 使用说明:slide.js文件包含小部分es6语法编写的文 ...
JS正则表达式-附身份证号码验证（简易版）
文章目录 JS正则表达式匹配与搜索一.方括号,圆括号二.修饰符三.元字符四.量词身份证号码验证(简易版) 身份证号码规则: 1.地址码 2.年份码 3.月份码 4.日期码 5.顺序码 6. ...
原生js实现移动端touch事件，解决穿透问题
四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取 ...
原生js实现移动端京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)
一.实现效果二.实现功能搜索框滑动固定,伸缩动画菜单栏左右滑动,超出区域自动弹回 banner自动轮播,手指左右滑动,滑动距离一半以内自动弹回,超过一半自动跳到下一张,圆点跟随显示颜色,以及实现 ...
前端学习（2879）歌谣学习篇原生js和canvas实现弹幕功能
我是歌谣放弃很难坚持一定很酷 2021继续加油目录结构文件地址源码地址后面可见源码文件 index.css body { margin: 0; } .container { width: ...

原生JS实现移动端弹幕（虎牙，斗鱼简易版）

话不多说，老规矩，先上Demo 点此预览

实现思路：

- 首先是界面布局的实现CSS

html界面的实现

js的实现

最后，预览地址blogai.cn

原生JS实现移动端弹幕（虎牙，斗鱼简易版）相关推荐

最新文章

热门文章