<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>弹幕技术</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/animate.css" type="text/css"/>
<link rel="stylesheet" href="css/sg.css" type="text/css"/>
<style type="text/css">
*{margin:0;padding:0;}
body{
background:rgb(95,102,126);
font-family:"微软雅黑";color:#000;
}
.box{width:1024px;text-align:center;margin:0 auto;position:relative;}
.box h1{
text-align:center;
color:#fff;
background:rgb(95,102,126);
text-shadow:2px 5px 5px #000;font-size:30px;
padding-top:10px;
padding-bottom:30px;}
/*弹幕 start*/
.box .dm{width:800px;height:565px;display:block;color:#fff;
position:absolute;/*margin:0px 0px 0px 111px;上下，？ ，？，左右 */
background:rgba(67, 67, 114, 0.07);top:60px;
/*元素的叠放顺序，只有position:absolute; 绝对定位才有用 z-index:2;值越大 显示越前面 rgba(67, 67, 114, 0.07);*/
left:111px;
}
/*弹幕 end*/
.start_dm{display:block;width:40px;height:40px;
background:rgba(119, 119, 122, 0.44);line-height:40px;text-decoration:none;
border-radius:20px;position:absolute;
top:60px;left:113px;border:1px solid #fff;
cursor:pointer;z-index:4;color:#000;
}
.start_dm:hover{background:rgba(119, 119, 122, 0.44);color:#fff;}
.colse_dm{display:block;width:40px;height:40px;
background:rgba(119, 119, 122, 0.44);line-height:40px;text-decoration:none;
border-radius:20px;position:absolute;color:#fff;font-size:20px;
top:0px;right:0px;border:1px solid #fff;
cursor:pointer;z-index:4;}
.colse_dm:hover{background:rgba(119, 119, 122, 0.44);color:#000;}
.send{width:800px;height:40px;position:absolute;bottom:-36px;left:112px;}
.text{width:80%;height:20px;box-shadow:2px 2px 2px #000;float:left;font-size:18px;font-family:"微软雅黑";}
.but{display:block;line-height:20px;float:left;width:153px;
border:1px solid #fff;text-decoration:none;border-radius:5px;background:red;color:#fff;position:relative;}
.but:hover{background:#000;}
.show div{position:absolute;top:76px;right:0;font-size:22px;}
</style>
</head>
<body>
<!--弹幕视频 strat -->
<div class="box">
<h1>互联网弹幕技术</h1>
<video class="asd" controls="controls" width="800" height="600" poster="images/favicon.ico" audio="muted">
<source src="mv/123.mp4" type="video/mp4"/>
<source src="mv/123.webm" type="video/webm"/>
<source src="mv/123.ogg" type="video/ogg"/>
<source src="mv/123.ogv" type="video/ogv"/>
</video>
<a href="javascript:void(0)" class="start_dm">弹幕</a>
<!--弹幕层 start-->
<div class="dm">
<a href="javascript:void(0)" class="colse_dm">x</a>
<!--内容区 start-->
<div class="show">
<!--<div>阿斯达斯的</div>
<div>阿斯达斯</div>
<div>阿斯达斯我</div> -->
</div>
<!--内容区 end-->
</div>
<!--弹幕层 end-->
<!--发送消息的区域 start-->
<div class="send">
<input type="text" value="" placeholder="请输入评论~" class="text" />
<a class="but" href="javascript:void(0)">发布评论</a>
</div>
<!--发送消息的区域 end-->
</div>
<!--弹幕视频 end-->
<script type="text/javascript">
//设置动画输入函数， runCss 自己的一个类库
var runCss = ["pulse","bounce","tada","swing","flip","flipInX","flipOutX","fadeInLeftBig","hinge","rollIn"];
var _left = $(".dm").width() - $(".show").width();
//var loo = runCss[Math.ceil(Math.random()*runCss.length)];
//隐藏弹幕
//$(".start_dm").toggle();
$(".colse_dm").toggle();
$(".dm").hide();
$(".send").hide();
$(function(){
//弹幕事件
$(".start_dm").click(function(){
$(".start_dm,.dm,.colse_dm,.send").toggle(500);
$(this).hide();
});
//关闭事件
$(".colse_dm").click(function(){
$(".start_dm,.dm,.colse_dm,.send").toggle(500);
$(this).hide();
});
$(".but").click(function(){
//获取内容
var text = $(".text").val();
var _lable =$("<div style='font-size:30px;font-weight:bold;font-family:'微软雅黑';' class='animated "+runCss[Math.ceil(Math.random()*runCss.length)]+"'>"+text+"</div>");
//拼接到显示的div
$(".dm .show").append(_lable);
init_screen();
});
});
//初始化屏幕
function init_screen(){
//默认顶部
var _top = 0;
//每次执行一个div都会执行这个function
$(".show").find("div").show().each(function(){
//弹幕的高度 减去div本身的宽度，可以算出left的值
var _left = $(".dm").width() - $(this).width();
//弹幕高度
var _height = $(".dm").height();
_top = _top+76;
if(_top>=_height-50){
_top = 0;
}
//设置文字的初始化位置
$(this).css({left:_left,top:_top,color:getRandomColor()});
var time = 10000;
$(this).css({left:_left,top:_top,color:getRandomColor()});
if($(this).index() % 2 ==0){
time = 15000;
}
//文字移动
$(this).animate({left:"-"+_left+"px"},time,function(){
$(this).remove();
});
});
}
//随机颜色
function getRandomColor(){
/*16777215 为16进制的颜色ffffffff转成10进制的数字 2,>> 数字取整 3,转成16进制不足的以0来补充*/
return "#" +("00000"+((Math.random()*16777215+0.5)>> 0)).toString(16).slice(-6);
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<title>弹幕技术</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/animate.css" type="text/css"/>
<link rel="stylesheet" href="css/sg.css" type="text/css"/>
<style type="text/css">
*{margin:0;padding:0;}
body{
background:rgb(95,102,126);
font-family:"微软雅黑";color:#000;
}
.box{width:1024px;text-align:center;margin:0 auto;position:relative;}
.box h1{
text-align:center;
color:#fff;
background:rgb(95,102,126);
text-shadow:2px 5px 5px #000;font-size:30px;
padding-top:10px;
padding-bottom:30px;}
/*弹幕 start*/
.box .dm{width:800px;height:565px;display:block;color:#fff;
position:absolute;/*margin:0px 0px 0px 111px;上下，？ ，？，左右 */
background:rgba(67, 67, 114, 0.07);top:60px;
/*元素的叠放顺序，只有position:absolute; 绝对定位才有用 z-index:2;值越大 显示越前面 rgba(67, 67, 114, 0.07);*/
left:111px;
}
/*弹幕 end*/
.start_dm{display:block;width:40px;height:40px;
background:rgba(119, 119, 122, 0.44);line-height:40px;text-decoration:none;
border-radius:20px;position:absolute;
top:60px;left:113px;border:1px solid #fff;
cursor:pointer;z-index:4;color:#000;
}
.start_dm:hover{background:rgba(119, 119, 122, 0.44);color:#fff;}
.colse_dm{display:block;width:40px;height:40px;
background:rgba(119, 119, 122, 0.44);line-height:40px;text-decoration:none;
border-radius:20px;position:absolute;color:#fff;font-size:20px;
top:0px;right:0px;border:1px solid #fff;
cursor:pointer;z-index:4;}
.colse_dm:hover{background:rgba(119, 119, 122, 0.44);color:#000;}
.send{width:800px;height:40px;position:absolute;bottom:-36px;left:112px;}
.text{width:80%;height:20px;box-shadow:2px 2px 2px #000;float:left;font-size:18px;font-family:"微软雅黑";}
.but{display:block;line-height:20px;float:left;width:153px;
border:1px solid #fff;text-decoration:none;border-radius:5px;background:red;color:#fff;position:relative;}
.but:hover{background:#000;}
.show div{position:absolute;top:76px;right:0;font-size:22px;}
</style>
</head>
<body>
<!--弹幕视频 strat -->
<div class="box">
<h1>互联网弹幕技术</h1>
<video class="asd" controls="controls" width="800" height="600" poster="images/favicon.ico" audio="muted">
<source src="mv/123.mp4" type="video/mp4"/>
<source src="mv/123.webm" type="video/webm"/>
<source src="mv/123.ogg" type="video/ogg"/>
<source src="mv/123.ogv" type="video/ogv"/>
</video>
<a href="javascript:void(0)" class="start_dm">弹幕</a>
<!--弹幕层 start-->
<div class="dm">
<a href="javascript:void(0)" class="colse_dm">x</a>
<!--内容区 start-->
<div class="show">
<!--<div>阿斯达斯的</div>
<div>阿斯达斯</div>
<div>阿斯达斯我</div> -->
</div>
<!--内容区 end-->
</div>
<!--弹幕层 end-->
<!--发送消息的区域 start-->
<div class="send">
<input type="text" value="" placeholder="请输入评论~" class="text" />
<a class="but" href="javascript:void(0)">发布评论</a>
</div>
<!--发送消息的区域 end-->
</div>
<!--弹幕视频 end-->
<script type="text/javascript">
//设置动画输入函数， runCss 自己的一个类库
var runCss = ["pulse","bounce","tada","swing","flip","flipInX","flipOutX","fadeInLeftBig","hinge","rollIn"];
var _left = $(".dm").width() - $(".show").width();
//var loo = runCss[Math.ceil(Math.random()*runCss.length)];
//隐藏弹幕
//$(".start_dm").toggle();
$(".colse_dm").toggle();
$(".dm").hide();
$(".send").hide();
$(function(){
//弹幕事件
$(".start_dm").click(function(){
$(".start_dm,.dm,.colse_dm,.send").toggle(500);
$(this).hide();
});
//关闭事件
$(".colse_dm").click(function(){
$(".start_dm,.dm,.colse_dm,.send").toggle(500);
$(this).hide();
});
$(".but").click(function(){
//获取内容
var text = $(".text").val();
var _lable =$("<div style='font-size:30px;font-weight:bold;font-family:'微软雅黑';' class='animated "+runCss[Math.ceil(Math.random()*runCss.length)]+"'>"+text+"</div>");
//拼接到显示的div
$(".dm .show").append(_lable);
init_screen();
});
});
//初始化屏幕
function init_screen(){
//默认顶部
var _top = 0;
//每次执行一个div都会执行这个function
$(".show").find("div").show().each(function(){
//弹幕的高度 减去div本身的宽度，可以算出left的值
var _left = $(".dm").width() - $(this).width();
//弹幕高度
var _height = $(".dm").height();
_top = _top+76;
if(_top>=_height-50){
_top = 0;
}
//设置文字的初始化位置
$(this).css({left:_left,top:_top,color:getRandomColor()});
var time = 10000;
$(this).css({left:_left,top:_top,color:getRandomColor()});
if($(this).index() % 2 ==0){
time = 15000;
}
//文字移动
$(this).animate({left:"-"+_left+"px"},time,function(){
$(this).remove();
});
});
}
//随机颜色
function getRandomColor(){
/*16777215 为16进制的颜色ffffffff转成10进制的数字 2,>> 数字取整 3,转成16进制不足的以0来补充*/
return "#" +("00000"+((Math.random()*16777215+0.5)>> 0)).toString(16).slice(-6);
}
</script>
</body>
</html>
