HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>视频弹幕</title>
<link rel="stylesheet" type="text/css" href="style/index.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="top">
<div class="topContent">视频弹幕网</div>
</div>
<div id="screen">
<div class="video">
//自己引用一张图片就好
<img src="images/01.jpg" width="1200" />
</div>
<div class="control">
<input type="text" name="message" placeholder="按Enter回车键发送弹幕" />
<span class="btn">发送</span>
</div>
</div>
</body>
</html>
JS
$(function(){
function send(){
var $message=$("#screen .control input[name=message]");
if($message.val()==""){
alert("弹幕内容不得为空。");
$message.focus();
return false;
}else{
var videoHeight=$("#screen .video").height();
var newTop=parseInt(Math.random()*videoHeight);
var $newNode=$('<div class="message">' + $message.val() + '</div>')
$("#screen .video").append($newNode);
$newNode.css({
"right":-$("#screen .video .message").last().width()+ "px",
"top":newTop + "px"
})
$newNode.animate({
"left":-$("#screen .video .message").last().width()+ "px"
},getRandomSpeed(),function(){
$(this).remove();
})
$message.val("");
}
}
$("#screen .control .btn").on("click",function(){
send();
})
$(document).on("keyup",function(event){
if(event.keyCode==13){
send();
}
})
function getRandomSpeed(){
var min=3000;
var max=10000;
var speed=parseInt(Math.random()*(max-min+1))+min;
return speed;
}
})
CSS
*{margin:0;}
body{
font-family: Microsoft YaHei;
font-size: 14px;
overflow-x: hidden;
}
a{text-decoration: none;}
a:hover{text-decoration: none;}
p{margin-bottom: 10px;}
/*top顶部*/
#top{
width:100%; height:40px;
line-height: 40px;
background-color: #333333;
}
#top .topContent{
width:1100px; height:inherit;
margin:0 auto;
color:#ffffff;
}
/*弹幕*/
#screen{
width:1200px;
margin:0 auto;
}
#screen .video{
position: relative;
}
#screen .video div.message{
display: inline-block;
position: absolute;
color:#ffffff;
font-size: 16px;
}
#screen .control{
height:60px;
background-color: #333333;
line-height: 60px;
padding-left:10px;
}
#screen .control input[name=message]{
width:500px; height:20px;
text-indent: 5px;
outline: none;
}
#screen .control .btn{
display: inline-block;
width:80px; height:25px;
background-color: #ff5857;
line-height: 25px;
text-align: center;
vertical-align: middle;
margin-left:-5px;
border-radius: 0 5px 5px 0;
color:#ffffff;
cursor:pointer;
}