彈幕技術
<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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur