<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Java开发视频弹幕技术SreenText</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="Version-1.0">
<title></title>
</head>
<style type="text/css">
body{
background:pink;
margin: 0px;
padding:0px;
}
#click-danmu{
display:block;
150px;
height:40px;
font-size:24px;
color:#fff;
cursor:pointer;
text-decoration: none;
font-weight:bold;
position: absolute;
top:20px;
left:20px;
}
.screen{
100%;
height:100%;
position:absolute;
top:0px;
left:0px;
display: none;
}
.screen-top{
padding:0px;
margin: 0px;
}
.back-danmu{
150px;
height:40px;
display: block;
font-size: 24px;
cursor:pointer;
text-decoration: none;
font-weight:bold;
position:absolute;
top:20px;
right:20px;
color:#fff;
z-index:8;
}
.mask{
100%;
height:100%;
background:#000;
opacity: 0.7;
position: absolute;
left:0;
top:0;
z-index:1;
}
.show{
position: relative;
z-index:3;
}
.show div{
line-height:36px;
font-size:24px;
font-weight:bold;
position:absolute;
top:0;
left:0;
}
.screen-bottom{
100%;
height:80px;
background:#000;
position: absolute;
bottom:0;
z-index: 4;
}
.send-content{
100%;
height:70px;
line-height: 70px;
text-align:center;
}
.textin{
400px;
height:40px;
outline: none;
border:0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
text-indent:10px;
}
.send-click{
outline: none;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
100px;
height:42px;
background: #088;
color:#fff;
font-size:20px;
cursor:pointer;
border: 0;
margin:0px 0px 0px -8px;
}
</style>
<body>
<a href="#" id="click-danmu">弹出弹幕</a>
<div class="screen">
<div class="screen-top">
<a href="#" class="back-danmu">退出弹幕</a>
<div class="mask"></div>
<div class="show"></div>
</div>
<div class="screen-bottom">
<div class="send-content">
<input type="text" class="textin"/>
<input type="button" value="点击发送" class="send-click"/>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
//显示和弹出弹幕框
$("#click-danmu").click(function(){
$(".screen").fadeIn(1000);
})
$(".back-danmu").click(function(){
$(".screen").fadeOut(1000);
})
//button发送
$(".send-click").click(function(){
var text=$(".textin").val();
$(".show").append("<div>"+text+"</div>");
initscreen();
})
//回车键发送
$(".textin").keydown(function(){
var code=window.event.keyCode;
if(code==13){
var text=$(".textin").val();
$(".show").append("<div>"+text+"</div>");
initscreen();
}
})
//初始化函数
function initscreen(){
var _top=0;
$(".show").find("div").show().each(function(){
var _left=$(window).width()-$(this).width();
var _height=$(window).height();
_top=_top+80;
if(_top>_height-100){
_top=80;
}
var time=10000;
if($(this).index()%2==0){
time=20000;
}
$(this).css({left:_left,top:_top,color:getRandomColor()});
$(this).animate({left:"-"+_left+"px"},time,function(){
});
});
}
//获取随机数
function getRandomColor(){
return '#'+(Math.random()*0xffffff<<0).toString(16);
}
</script>
</html>