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

详细

代码下载：http://www.demodashi.com/demo/10371.html

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大师（http://www.demodashi.com）宣传，拒绝转载，转载需要作者授权

jQuery写一个简单的弹幕墙相关推荐

使用jQuery写一个简单的轮播图（笔记）
html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
自己用jQuery写一个瀑布流
自己用jQuery写一个瀑布流前言这个月一直在忙工作.一直没有机会学习新的知识.前两天,突然想写一个瀑布流代码.倒不是找不到瀑布流代码.而是我想自己练练脑子. 首先,先考虑思路.所有的图片,全部采 ...
怎样写一个简单的操作系统？（原文标题：How to write a simple operating system）分类：翻译 2011-01-26 01:10 3175人阅读评论(3) 收藏
怎样写一个简单的操作系统?(原文标题:How to write a simple operating system) 分类: 翻译2011-01-26 01:10 3175人阅读评论(3) 收藏举 ...
小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
用java做一个简单记事本_用记事本写一个简单的java程序
用记事本写一个简单的java程序第一步: 安装好jdk,并设置好环境变量. 桌面-计算机(右键)-属性-高级系统设置-环境变量-path-在变量值后加上:和jdk安装路径加上(路径即为C:\Prog ...
如何搭建python框架_从零开始:写一个简单的Python框架
原标题:从零开始:写一个简单的Python框架 Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. 你为什么想搭建一个Web框架?我想有下面几个原因: 有一个 ...
ipad php mysql_如何用PHP/MySQL为 iOS App 写一个简单的web服务器（译） PART1
原文:http://www.raywenderlich.com/2941/how-to-write-a-simple-phpmysql-web-service-for-an-ios-app 作为一个i ...

jQuery写一个简单的弹幕墙

详细