jQuery写一个简单的弹幕墙
jQuery 一个 简单
2023-09-11 14:18:03 时间
概述
近几年由于直播,弹幕流行起来,之前看到过用js制作弹幕墙的思路,觉得很有趣。自己就花了点时间把他做成了更灵活的jQuery插件,现在分享出来。
详细
1、此插件逻辑简单,注释清晰,下载及用
2、如果读者能理解源码当然更好
3、读者可以根据实际需要修改样式或布局
一、准备工作
1、主流浏览器(非ie),ie9+
2、掌握html、css、js基础
二、实现思路
1、文件结构
bullet-screen.js:插件主js
bullet_screen.css:样式文件
index.html:运行入口文件
jquery-1.9.1.min.js:jQuery文件(版本没有要求)
2、页面布局
一个弹幕墙容器接收弹幕
一个文本框输入弹幕
一个发送按钮 一个清屏按钮
3、主要代码
html部分代码
<body> <div class="container"> </div> <div class="menu-bar"> <input type="text" placeholder="弹幕内容" id="bullet-text"/> <span class="btn send">发送弹幕</span> <span class="btn close">关闭弹幕</span> </div> </body>
css代码
.container{ width: 1000px; margin: 100px auto; background: #e8e8e8; height: 500px; border-radius: 5px; border: 1px solid #ddd; position: relative; overflow: hidden; } .menu-bar{ width: 1000px; margin: 0px auto; text-align: center; } .btn{ padding: 5px 20px; display: inline-block; border-radius: 3px; border: 1px solid #e0e0e0; margin: 15px; background: #37a; color: #fff; cursor: pointer; }
js主要代码
(function($){ $.bulletScreen={ timers:[], //定时数组 /** * 添加弹幕 * @param odiv 当前弹幕元素 * @param container 弹幕墙容器 */ add:function(odiv,container){ odiv.css({ //定义弹幕元素的基本样式 position:'absolute', fontSize:'20px', display:'block', whiteSpace:'nowrap' }); var r = Math.floor(Math.random() * 254); var g = Math.floor(Math.random() * 254); var b = Math.floor(Math.random() * 254); odiv.css({ //定义弹幕元素的随机样式(top位置,颜色) color: "rgb(" + r + "," + g + "," + b + ")", top: (Math.floor(Math.random() * container.height())-24) + "px", width:odiv.width(), right: 0 }); container.append(odiv); this.move(odiv,container); }, /** * 暴露给外层调用的方法 * @param val 弹幕内容 * @param container 弹幕墙容器 */ send:function(val,container){ var odiv = $("<div class='bullet'></div>"); //创建弹幕元素 odiv.html(val); this.add(odiv,container); }, /** * 定时改变弹幕的位置(right+1),到达左侧时清除弹幕,清除定时任务 * @param odiv 当前弹幕元素 * @param container 弹幕墙容器 */ move:function(odiv,container){ var i = 0; var timer = setInterval(function() { odiv.css({ right: (i += 1) + "px" }); if ((odiv.offset().left + odiv.width()) < container.offset().left) { odiv.remove() clearInterval(timer) } }, 10); this.timers.push(timer); }, /** * 清除弹幕墙上的所有弹幕 * @param container 弹幕墙容器 */ clear:function(container){ for (var i = 0; i < this.timers.length; i++) { //遍历定时素组,清除所有定时任务 clearInterval(this.timers[i]) } container.find('.bullet').remove(); } } })(jQuery);
三、运行效果
四、兼容性
主流浏览器(非ie),ie9+
五、其他补充
1、在浏览器中运行index.html及可
2、涉及jQuery插件开发的知识
3、demo提供了主要思路,具体要根据实际做相应修改,有不足之处欢迎指正
注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
相关文章
- What does jQuery.fn mean?
- WCF入门教程(四)通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF,采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]
- jquery $.proxy使用 Jquery实现ready()的源码
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- 【Jquery】jQuery获取URL參数的两种方法
- 猴子也能学会的jQuery第七期——jQuery动画(上)
- jquery文件上传控件 Uploadify
- jquery用div模拟一个下拉列表框
- 26个Jquery使用小技巧
- jquery加载页面的几种方法(页面加载完成就执行)
- jQuery 判断表单中多个 input text 中至少有一个不为空
- jQuery验证控件jquery.validate.js的使用介绍
- jquery.params.js,Jquery获取页面参数,js获取页面参数
- Jquery获取html参数, jquery.params.js 获取参数
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
- 利用jQuery实现ajax下载文件时进度条
- Jquery_JQuery之DataTables强大的表格解决方案
- jQuery基础 - 改变CSS样式
- JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法
- 小教程:自己创建一个jQuery长阴影插件
- jQuery框架开发一个最简单的幻灯效果
- jquery.validate+jquery.form提交的三种方式
- jquery easyui slider 滚动条 改为按年份滚动 类似谷歌地球样式
- 编写一个简单的Jquery插件