从学习html，css，js两三个月了，总觉得学习的不够深、不够透，就像犯错时听老师的教导，总是左耳进，右耳出。于是就从网上找一个实战例子来增加一下自己的记忆，刚好看到有个基础课程，视频网站弹幕开发，就自己照着敲一下，写一下自己的理解。
现在绝大部分的视频网站都提供了弹幕的功能，让我们在看视频之余，还可以随心所欲地吐槽一下，那今天我们就来探索视频网站弹幕开发（没有后端）。
效果图：
原料：
phpstorm(曾经讨论过编辑器，其实记事本最厉害，编辑器不重要，重要的是写代码的人。LOL中，英雄并不重要，重要的是使用英雄的人) jQuery类库 html css
用到的jQuery方法：
toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
animate(params,[speed],[easing],[fn])
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
append(content|fn)
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
content:要追加到目标中的内容
上面是查API拷贝过来的。
第一个方法用来打开、关闭弹幕，第二个方法是让弹幕动起来的，第三个方法是添加新的弹幕。
过程：
step 1：写一个html页面
step 2：写一个块<div>作为弹幕的开启open
step 3：写一个块<div>承载弹幕screen
在这个<div>上面有三部分：
关闭close<div>
弹幕显示show<div>
发射弹幕send<div>（两个input，一个type="text",一个type="button")
<div style="text-align: center;">
<br /><br /><br /><br /><br /><br /><br /><br />
<h1><a id="dm-open" href="#">客官，你点我啊</a></h1>
</div>
<div class="dm">
<div class="dm-screen">
<div id="dm-close"><a href="#">X</a></div>
<div class="dm-show">
<div>爱你</div>
<div>一生中最爱</div>
<div>偏偏喜欢你</div>
<div>只想一生跟你走</div>
</div>
</div>
<div class="dm-send">
<div class="dm-sub">
<input id="dm-txt" type="text" value="请输入你想说的话" title=""/>
<input id="dm-btn" type="button" value="发射弹幕" />
</div>
</div>
</div>
step 4：写css部分代码(太多了，我也是想到什么就写什么的，没什么头绪）
如：根据上面块的划分：
open 只有一个链接a，a{text-decoration:none;} a:hover{text-decoration:underline;}
screen 用来显示弹幕内容 screen{background-color:#000000;opacity:o.5}
close 设置为圆角、右上角 close{border-radius:19px;//大小为块大小的一半}
show 只要设置一下字体的大小 show{font-size:22px;}
send 在底部{bottom:0;},有一个输入框和一个按钮，添加圆角 #txt{border-radius:8px}
<style>
*{
margin:0;padding:0;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
body{
font-family:serif;
}
.dm{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
display:none;
}
.dm-screen{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
background-color: #000000;
opacity:0.5;
z-index:1;
}
#dm-close{
width:38px;
height:38px;
position:absolute;
top:20px;
right:20px;
background-color:#fff;
border-radius:19px;
border:1px solid #000;
text-align:center;
line-height:38px;
color:white;
font-size:32px;
z-index:3;
}
#dm-close a:hover{
color:white;
}
#dm-close:hover{
background-color:red;
}
.dm-show{
position:relative;
}
.dm-show div{
font-size:22px;
position:absolute;
/*right:0;*/
z-index:2;
color:#ffffff;
}
.dm .dm-send{
position:absolute;
height: 88px;
width:100%;
background-color:#000;
bottom:0;
z-index:1;
border-radius:4px;
}
.dm .dm-send .dm-sub{
height:88px;
text-align:center;
line-height:100px;
}
.dm .dm-send .dm-sub #dm-txt{
height:48px;
width:480px;
border:0;
border-radius:8px;
font-size:18px;
}
.dm .dm-send .dm-sub #dm-btn{
height:48px;
width:66px;
border:0;
background-color: #65c33d;
color:#fff;
border-radius:8px;
}
.dm .dm-send .dm-sub #dm-btn:hover{
background-color: #3eaf0e;
}
</style>
step 5：js代码
初始化弹幕：init_screen()
open点击事件实现弹幕开启
open.toggle()
show里面的文字动起来
show.animate();
添加弹幕
show.append(div);
为了可以得到随机的颜色，借用了getRandomColor()方法
代码如下：
<script>
$(function(){
//打开、关闭弹幕
$("#dm-open,#dm-close").click(function(){
$(".dm").toggle(1000);
});
//添加弹幕内容
$("#dm-btn").click(function(){
var txt=$("#dm-txt").val();
var div="<div>"+txt+"<div>";
$(".dm-show").append(div);
init_screen();
});
init_screen();
});
function init_screen(){
var _top=0;
$(".dm-show").find("div").show().each(function(){
//获取弹幕初始位置：让它在最右边
var _left=$(window).width()-$(this).width();
var _height=$(window).height();
$(this).css({left:_left,top:_top,color:getRandomColor()});
_top=_top+66;
if(_top>=_height-100)
_top=0;
var time=16000;
if($(this).index()%2==0)
time=20000;
//jQuery动画
$(this).animate({left:‘-‘+_left+‘px‘},time,"linear");
});
}
//获取随机颜色
var getRandomColor = function(){
return ‘#‘ +
(function(color){
return (color += ‘0123456789abcdef‘[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})(‘‘);
}
</script>
最后，就是验证成果的时候，输入一堆无关的话，一直点“发射弹幕”。另外，适应不了手机，于是添加了<meta name="viewport" content="width=device-width,initial-scale=1.0" />自适应，效果有限，应该是自己的CSS代码写得不好。
心得：写页面之前，要心中有框架，再去想实现。