js实现网页特效(利用原生js模拟直播弹幕滚动效果)
类别:编程学习 浏览量:831
时间:2021-10-07 00:57:13 js实现网页特效
利用原生js模拟直播弹幕滚动效果目录
- 1、基本原理
- 2、具体代码
- 总结
首先将直播区域分成十份(我个人自己为了便于计算分成十份),将输入的内容随机放到分成的十份区域中,插入到十份区域右边的视图之外,然后调用动画,按照随机的速度从右向左移动,当移动到左侧区域视图之外移除此滚动元素。
2、具体代码<li class="move_video_content"> <li class="video_content"> <li class="video_li" id="video_view"></li> <li class="scroll_content"> <ul class="scroll_ul" id="scroll_ul_id"></ul> </li> </li> <li class="input_content"> <input type="text" class="input_text" maxlength="30" placeholder="请输入要发送的弹幕" id="input_text_id"> <button type="button" class="button_btn" id="send_btn">发送</button> </li> </li>
具体效果如下:
js代码如下
let inputText = document.getElementById("input_text_id");//input输入框 let scrollContent = document.getElementById("scroll_ul_id");//侧边聊天栏 let videoView = document.getElementById("video_view");//视频区域 let videoWidth = videoView.offsetWidth;//直播区域的总宽度 let listHeight = videoView.offsetHeight/10;//每一层直播区域的高度 let listTopNum = [0,1,2,3,4,5,6,7,8,9];//将直播区域的高度分成10层 document.getElementById("send_btn").addEventListener("click",function(){//监听发送按钮 let value = inputText.value;//获取输入框的值 if(!value) return; appendDom(value);//将输入框的值插入到滚动聊天中 createVideoBulletChatDom(value);//将输入框的值插入到弹幕中 inputText.value = '';//清空输入框 scrollContent.scrollTop = scrollContent.scrollHeight;//自动滚动到底部 }) function appendDom(value){//将输入框的值插入到滚动聊天中 let li = document.createElement("li"); li.setAttribute("class","scroll_li"); li.innerHTML = value; scrollContent.appendChild(li); } let speedArr = ['normal','fast','faster']; function createVideoBulletChatDom(value){//将输入框的值插入到弹幕中 let num = listTopNum[Math.floor((Math.random()*listTopNum.length))]; let p = document.createElement("p"); p.setAttribute("class","video_p"); p.style.top = (num * 60) + "px"; p.style.left = videoWidth + "px"; p.innerHTML = value; videoView.appendChild(p); let speed = speedArr[Math.floor((Math.random()*speedArr.length))]; Animate(p,speed);//滚动动画 } let animateType = { 'normal':5, 'fast':10, 'faster':15 } function Animate(dom,speed){//滚动动画 let domWidth = dom.offsetWidth;//当前弹幕元素的宽度 let distance = videoWidth;//直播区域的总宽度 speed ? speed : 'normal'; let interval = animateType[speed] let timer = setInterval(function(){ distance -= interval; dom.style.left = distance + 'px'; if(distance <= -domWidth){ clearInterval(timer); videoView.removeChild(dom);//清除已经滚动出屏幕的标签 } },50) }
根据直播区域分成的十份(listTopNum),获取每一层区域的高度(listHeight),然后改变滚动标签的top实现插入到十份中的不同区域。
创建一个滚动标签就创建一个滚动动画(函数Animate),默认速度是normal,每次创建动画都会随机传入一个随机速度类型(normal、fast、faster),按照传入的速度类型来改变每次滚动减去的距离大小,实现不同的滚动速度。
总结这是个人闲着无事一时兴起写的一个直播滚动动画,如果加上WebSocket就能实现多人同步通信,这个以后无事再做完善。
具体代码请访问[:github.com/liqc-wwl/bu…]下载下来就能直接看效果。
到此这篇关于利用原生js模拟直播弹幕滚动效果的文章就介绍到这了,更多相关js模拟直播弹幕滚动内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- js事件冒泡与事件捕获(基于事件冒泡、事件捕获和事件委托详解)
- js array的所有方法(js 数组 find,some,filter,reduce区别详解)
- json和xml比较与区别
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- 常用的几种jsp开发环境搭建(怎么一键安装Jsp网站程序?Jsp环境一键配置软件JspStudy推荐)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)
- vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
- 前端表单验证(AmazeUI的JS表单验证框架实战示例分享)
- JavaScriptSerializer对Json对象的序列化和反序列化
- dedecms中的有些功能如何修改(织梦DEDECMS中用JS方式调用评论总数的技巧)
- laravel-admin代码执行流程(解决laravel-admin 自己新建页面里 js 需要刷新一次的问题)
- 延迟加载js文件
- js条件语句教学(浅谈JS如何写出漂亮的条件表达式)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- js获取子表单所有数据(JavaScript实现异步提交表单数据)
- 爱情是什么(爱情是什么最经典的话)
- 乔欣 古装剧中的高颜值(古装剧中的高颜值)
- 怎么才可以财富自由(如何让自己实现财富自由)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
- 怎么快速学好英语(怎么快速学好英语初中)
- 中国留学生都是富二代吗()
热门推荐
- 阿里云服务器扩容了怎么恢复(一条命令解决阿里云服务器系统盘空间不足问题)
- sql语句执行顺序
- sqlserver2012登录出现报错18456(SQL Server 2012 sa用户登录错误18456的解决方法)
- 虚拟主机流量什么意思(虚拟主机流量会受到什么限制?)
- ASP.NET中异常处理的注意事项
- mysql记录binlog的方式(MySQL使用binlog日志做数据恢复的实现)
- sql查询union怎么用(SQL语句之Union和Union All的用法)
- docker中mysql连接命令(docker 如何修改mysql的root密码)
- phplaravel一般开发什么项目(laravel 去掉index.php伪静态的操作方法)
- apache设置站点(Apache 多端口多站点配置方法)