基于jQuery实现的简单弹幕功能
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>danmu</title>
<link rel="stylesheet" href="../plugins/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="content">
<div class="show-box">
<div class="danmu"></div>
</div>
<div class="text-box">
<input type="text" value="说点什么?" id="please_text">
<div class="text-button">
<button type="button" class="btn btn-primary" id="send">发射</button>
<button type="button" class="btn btn-danger" id="clean">清屏</button>
</div>
</div>
</div>
</body>
<script src="../plugins/jquery/jquery-3.3.1.js"></script>
<script src="../plugins/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="../js/index.js"></script>
</html>
css
body {
display: flex;
text-align: center;
}
.content {
margin: 0 auto;
}
.show-box {
width: 1200px;
height: 500px;
border: 1px solid #ccc;
}
#please_text {
margin-top: 30px;
}
#send {
margin-top: 30px;
}
#clean {
margin-top: 30px;
}
.danmu {
position: fixed;
left: 100%;
animation: danmu 10s ease 0s 1;
}
@keyframes danmu {
from {
left: 100%;
transform: translateX(0);
}
to {
left: 0;
transform: translateX(-100%);
}
}
js
$(function(){
//mouseover后获取焦点,并全选文本框内容
$("#please_text").mouseover(function(){
// $("#please_text").val("aaaa")
$("#please_text").focus()
$("#please_text").select()
//如果input的value值为默认值则清空
if ($("#please_text").val()=="说点什么?"){
$("#please_text").val("")
}
})
//mouseleave后失去焦点
$("#please_text").mouseleave(function(){
$("#please_text").blur()
if ($("#please_text").val()=="") {
$("#please_text").val("说点什么?")
}
})
$(".text-button").each(function(){
//点击发射按钮
$("#send").click(function(){
//创建弹幕飞过的区域
$(".show-box").append("<div class='danmu'></div>")
//将文本框输入内容追加到弹幕框中
$(".danmu:last-child").append($("#please_text").val())
})
})
//点击清屏按钮
$("#clean").click(function(){
$(".danmu").html("")
})
});
插件使用了jQuery、bootstrap等。
插件有待改进,比如设置多条弹幕轨道、弹幕不碰撞、同一轨道中两条相邻弹幕出现的延时、发送文字链接等弹幕格式、弹幕样式等。