jQuery写一个简单的弹幕墙

概述

近几年由于直播,弹幕流行起来,之前看到过用js制作弹幕墙的思路,觉得很有趣。自己就花了点时间把他做成了更灵活的jQuery插件,现在分享出来。

详细

1、此插件逻辑简单,注释清晰,下载及用

2、如果读者能理解源码当然更好

3、读者可以根据实际需要修改样式或布局

一、准备工作

1、主流浏览器(非ie),ie9+

2、掌握html、css、js基础

二、实现思路

1、文件结构

jQuery写一个简单的弹幕墙

bullet-screen.js:插件主js

bullet_screen.css:样式文件

index.html:运行入口文件

jquery-1.9.1.min.js:jQuery文件(版本没有要求)

2、页面布局

一个弹幕墙容器接收弹幕
一个文本框输入弹幕
一个发送按钮 一个清屏按钮

jQuery写一个简单的弹幕墙

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);

三、运行效果

jQuery写一个简单的弹幕墙

四、兼容性

主流浏览器(非ie),ie9+

五、其他补充

1、在浏览器中运行index.html及可

2、涉及jQuery插件开发的知识

3、demo提供了主要思路,具体要根据实际做相应修改,有不足之处欢迎指正

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

上一篇:【转】使用keepalived设置虚拟IP示例


下一篇:242. Valid Anagram