您的位置：首页 > 其它

弹幕技术

2015-09-15 21:38 330 查看

<!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>



<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>



<div class="dm">

<a href="javascript:void(0)" class="colse_dm">x</a>



<div class="show">



</div>



</div>





<div class="send">

<input type="text" value="" placeholder="请输入评论~" class="text" />

<a class="but" href="javascript:void(0)">发布评论</a>

</div>



</div>



<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航