单机版简单弹幕墙demo (jqery+bootstrap)
最近在看fcc ,上面有一个弹幕墙设计的题目,要求从后端获取数据,显示出来。百度,谷歌都没找到相关好的例子作为借鉴,索性按照自己的思路写了一个简单的demo 。在做demo的过程中遇到最大的问题就是怎么获取当前的div ,最开始用原生的JS来做,感觉很麻(cai)烦(niao),用Jquery 就简单多了。
html:
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>danmu</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- <link href="bootstrap/css/animate.css" rel="stylesheet"> -->
<!-- <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> --> </head> <body>
<div class="container">
<div class="row">
<div class="wallpaper col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 "></div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-1 col-md-3 col-md-offset-3">
<input type="text" class="form-control" placeholder="弹幕内容" id="danmu">
</div>
<div class="col-sm-2 col-md-1 setpad">
<button class="form-control btn btn-info" id="send">发射弹幕</button>
</div>
<div class="col-sm-2 col-md-1 setpad">
<button class="form-control btn btn-danger" id="clear">清屏</button>
</div>
</div>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/index.js"></script>
</body> </html>
style.css:
.move {
font-size: 20px;
display: block;
position: absolute;
} .wallpaper {
height: 400px;
border: 1px solid #9A9FB3;
margin-top: 20px;
margin-bottom: 10px;
/* background-color: #FCF7F7;*/
overflow: hidden;
} .setpad {
padding: 0 5px 0 0;
}
js:
// 创建一个div
$("#send").click(function() {
var div = $("<div></div>");
var value = $("#danmu").val();
var that = div;
that.html(value)
that.addClass("move")
$(".wallpaper").append(div)
init(that)
move(that)
})
// 清除弹幕
$("#clear").click(function() {
for (var i = 0; i < timers.length; i++) {
clearInterval(timers[i])
}
$(".move").remove()
})
// 把每一个setInterval 放到数组中
var timers = [];
// div 移动
function move(that) {
var i = 0;
var timer = setInterval(function() {
that.css({
right: (i += 1) + "px"
});
if ((that.offset().left + that.width()) < $(".wallpaper").offset().left) {
that.remove()
clearInterval(timer)
} }, 10)
timers.push(timer) }
// 初始化div 设置div宽度,字体颜色,
function init(that) { var r = Math.floor(Math.random() * 254);
var g = Math.floor(Math.random() * 254);
var b = Math.floor(Math.random() * 254);
that.css({
"color": "rgb(" + r + "," + g + "," + b + ")",
top: Math.floor(Math.random() * $(".wallpaper").height()) + "px",
right: -that.width(),
width: that.width()
})
console.log(that.width())
}
其中为什么要设置 right: -that.width(), width: that.width() ,是div 在创建的时候一个字一个字显示 ,在移除的一个字一个字移除(不设置width,在最左边会被挤压成一列)
这只是一个很简单很简单的demo,我觉得要做的比较好一点,应该用convas ,设计两个convas ,一个用来显示背景,一个用来显示弹幕。希望有此相关经验的大神和网友能留言交流下,如果有相关的demo ,和代码分享 也是极好的。
单机版简单弹幕墙demo (jqery+bootstrap)的更多相关文章
- 简单数学算法demo和窗口跳转,关闭,弹框
简单数学算法demo和窗口跳转,关闭,弹框demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- Xamarin.Android再体验之简单的登录Demo
一.前言 在空闲之余,学学新东西 二.服务端的代码编写与部署 这里采取的方式是MVC+EF返回Json数据,(本来是想用Nancy来实现的,想想电脑太卡就不开多个虚拟机了,用用IIS部署也好) 主要是 ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
- C#开发微信公众平台-就这么简单(附Demo)转载
C#开发微信公众平台-就这么简单(附Demo) 来源:https://www.cnblogs.com/xishuai/p/3625859.html#!comments 写在前面 阅读目录: 服务号和 ...
- 通过flask实现web页面简单的增删改查bootstrap美化版
通过flask实现web页面简单的增删改查bootstrap美化版 项目目录结构 [root@node1 python]# tree -L 2 . ├── animate.css ├── fileut ...
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件(Form Controls) C#串口通信程序
C#中缓存的使用 缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可: <%@ Outp ...
- Maven+SpringMVC+Dubbo 简单的入门demo配置
转载自:https://cloud.tencent.com/developer/article/1010636 之前一直听说dubbo,是一个很厉害的分布式服务框架,而且巴巴将其开源,这对于咱们广大程 ...
- jQuery写一个简单的弹幕墙
概述 近几年由于直播,弹幕流行起来,之前看到过用js制作弹幕墙的思路,觉得很有趣.自己就花了点时间把他做成了更灵活的jQuery插件,现在分享出来. 详细 代码下载:http://www.demoda ...
随机推荐
- ext2文件系统
2.1. 总体存储布局 我们知道,一个磁盘可以划分成多个分区,每个分区必须先用格式化工具(例如某种mkfs命令)格式化成某种格式的文件系统,然后才能存储文件,格式化的过程会在磁盘上写一些管理存储布局的 ...
- UIButton设置了UIControlStateSelected和UIControlStateHighlighted状态的图片点击会闪烁的解决方案
[btn setBackgroundImage:img1 forState:UIControlStateSelected|UIControlStateHighlighted]; [btn setIma ...
- nexus-2.13.0-01.war
https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.13.0-01.war
- jQuery.inArray 方法的实现
jQuery.inArray(value, array) 如果 value 在 array 中,则返回该 value 所在的位置.否则返回 -1.这个简单的函数实际上是模拟 Array.prototy ...
- Linux上安装Mysql+Apache+Php
一.安装Mysql 1.卸载默认的mysql yum -y remove mysql-libs-* Removed: mysql-libs.x86_64 0:5.1.73-3.el6_5 卸载成功 ...
- python3.x爬取美团信息
在之前的文章中,笔者有提到,我们要在实践中去学习python,笔者有天就想着要不要爬点东西呢,跃跃欲试的节奏啊,想来想去,想到美团了,那么首先笔 者想给自己确定一个目标,就是我要爬什么样的数据,我要爬 ...
- solr中竞价排名实现
转载:http://mxsfengg.iteye.com/blog/308335 通常,lucene只返回与用户查询相关的文档,搜索的结果,跟lucene对文档评分有关.而在现实的查询中,我们有些时候 ...
- CentOS6.5 64bit 运行Mono程序
前几日和一技术友聊天,认为转Java好,java可以在Linux下运行,貌似c#不可以哦,就做了个尝试,运行控制台程序和窗口程序(界面编程,Linux下Java好像也比较烦吧) 现在贴环境: 参考:C ...
- 安卓Design包之CollapsingToolbarLayout(可折叠的工具栏布局)的简单使用
转自: CollapsingToolbarLayout的使用 注意:使用前需要添加Design依赖包,使用toolbar时需要隐藏标题头 CollapsingToolbarLayout作用是提供了一个 ...
- linux_cpu信息查询
查看cpu信息: [root@css-management ~]# cat /proc/cpuinfo processor : 0vendor_id : GenuineIntelcpu family ...