最近在看fcc ，上面有一个弹幕墙设计的题目，要求从后端获取数据，显示出来。百度，谷歌都没找到相关好的例子作为借鉴，索性按照自己的思路写了一个简单的demo 。在做demo的过程中遇到最大的问题就是怎么获取当前的div ，最开始用原生的JS来做，感觉很麻（cai）烦(niao)，用Jquery 就简单多了。
html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>danmu</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- <link href="bootstrap/css/animate.css" rel="stylesheet"> -->
<!-- <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> -->
</head>
<body>
<div class="container">
<div class="row">
<div class="wallpaper col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 "></div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-1 col-md-3 col-md-offset-3">
<input type="text" class="form-control" placeholder="弹幕内容" id="danmu">
</div>
<div class="col-sm-2 col-md-1 setpad">
<button class="form-control btn btn-info" id="send">发射弹幕</button>
</div>
<div class="col-sm-2 col-md-1 setpad">
<button class="form-control btn btn-danger" id="clear">清屏</button>
</div>
</div>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
style.css:
.move {
font-size: 20px;
display: block;
position: absolute;
}
.wallpaper {
height: 400px;
border: 1px solid #9A9FB3;
margin-top: 20px;
margin-bottom: 10px;
/* background-color: #FCF7F7;*/
overflow: hidden;
}
.setpad {
padding: 0 5px 0 0;
}
js:
// 创建一个div
$("#send").click(function() {
var div = $("<div></div>");
var value = $("#danmu").val();
var that = div;
that.html(value)
that.addClass("move")
$(".wallpaper").append(div)
init(that)
move(that)
})
// 清除弹幕
$("#clear").click(function() {
for (var i = 0; i < timers.length; i++) {
clearInterval(timers[i])
}
$(".move").remove()
})
// 把每一个setInterval 放到数组中
var timers = [];
// div 移动
function move(that) {
var i = 0;
var timer = setInterval(function() {
that.css({
right: (i += 1) + "px"
});
if ((that.offset().left + that.width()) < $(".wallpaper").offset().left) {
that.remove()
clearInterval(timer)
}
}, 10)
timers.push(timer)
}
// 初始化div 设置div宽度，字体颜色，
function init(that) {
var r = Math.floor(Math.random() * 254);
var g = Math.floor(Math.random() * 254);
var b = Math.floor(Math.random() * 254);
that.css({
"color": "rgb(" + r + "," + g + "," + b + ")",
top: Math.floor(Math.random() * $(".wallpaper").height()) + "px",
right: -that.width(),
width: that.width()
})
console.log(that.width())
}
其中为什么要设置 right: -that.width(), width: that.width() ，是div 在创建的时候一个字一个字显示 ，在移除的一个字一个字移除（不设置width，在最左边会被挤压成一列）
这只是一个很简单很简单的demo，我觉得要做的比较好一点，应该用convas ,设计两个convas ,一个用来显示背景，一个用来显示弹幕。希望有此相关经验的大神和网友能留言交流下，如果有相关的demo ，和代码分享 也是极好的。
时间： 2024-11-03 05:41:28