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大师发表，拒绝转载，转载需要作者授权
jQuery写一个简单的弹幕墙的更多相关文章
- 【jQuery学习】写一个简单的弹框页面，火狐浏览器有弹框，但IE8没有弹框的原因？
我也是刚学习jQuery,就从官网上下载了jQuery的包,版本是3.2.1 代码 如下: <!DOCTYPE html> <html> <head> <me ...
- 用node.js从零开始去写一个简单的爬虫
如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...
- 用Python写一个简单的Web框架
一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...
- 如何写一个简单的http服务器
最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...
- 如何写一个简单的shell
如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 一步一步写一个简单通用的makefile(三)
上一篇一步一步写一个简单通用的makefile(二) 里面的makefile 实现对通用的代码进行编译,这一章我将会对上一次的makefile 进行进一步的优化. 优化后的makefile: #Hel ...
- Java写一个简单学生管理系统
其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...
- （2）自己写一个简单的servle容器
自己写一个简单的servlet,能够跑一个简单的servlet,说明一下逻辑. 首先是写一个简单的servlet,这就关联到javax.servlet和javax.servlet.http这两个包的类 ...
随机推荐
- NGINX + TOMCAT7 + MEMCACHED 实现SESSION 共享
原文地址: http://my.oschina.net/u/1791256/blog/283064 TOMCAT7.0+ NGINX + MEMCACHED + memcached-session-m ...
- codeforces 444 C. DZY Loves Colors(线段树)
题目大意: 1 l r x操作 讲 [l,r]上的节点涂成x颜色,而且每一个节点的值都加上 |y-x| y为涂之前的颜色 2 l r 操作,求出[l,r]上的和. 思路分析: 假设一个区间为同样的颜 ...
- python接口自动化24-有token的接口项目使用unittest框架设计
获取token 在做接口自动化的时候,经常会遇到多个用例需要用同一个参数token,并且这些测试用例跨.py脚本了. 一般token只需要获取一次就行了,然后其它使用unittest框架的测试用例全部 ...
- 偏执却管用的10条Java编程技巧
本文由 ImportNew - LynnShaw 翻译自 javacodegeeks.欢迎加入翻译小组.转载请见文末要求. 经过一段时间的编码(咦,我已经经历了将近20年的编程生涯,快乐的日子总是过得 ...
- JavaScript 触发click事件 兼容FireFox，IE 和 Chrome
解决了火狐下无法触发click事件的问题 <script language="javascript"> function test2(name) { if(docume ...
- Arduino + SmartAirFilter 制作智能感应的 PM 空气净化器
先说 SmartAirFilters 知道 SmartAirFilters 源自微博上转发的非常火的那个帖子,和动辄七八千元的商用产品比,几百元的 SmartAirFilters(下面简称电扇) 确实 ...
- 关于MFC框架程序中CWinApp::OnIdle
很早之前就发现,我写的图形引擎在MFC框架程序中的刷帧率始终在60FPS左右.好在自己的程序对刷帧率的要求不是很高,所以一直没有太过纠结此事.直到今天看了别人的程序才发现应该在函数CWinApp::O ...
- IOS 实现界面本地化（国际化）
在制作应用程序的时候,可以使用本地化功能,将应用程序的内容翻译成多种语言,在不同的区域显示不同的语言.下面就通过简体中文本地化设置来讲解一下本地化的简单使用. 一.让应用程序支持中文语言环境 选择需要 ...
- 在Linux上安装Chef工作站
导读 Chef是一个IT基础设施自动化软件,它可以管理你组织中所有的服务器和网络设备.当我们想与Chef服务器.任何物理节点(服务器.网络设备等)的基础设施进行交互时,我们需要一个Chef工作站.本教 ...
- ubuntu添加默认路由才可以访问网络