最近在看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(), that.width() }) console.log(that.width()) }
其中为什么要设置 right: -that.width(), that.width() ，是div 在创建的时候一个字一个字显示 ，在移除的一个字一个字移除（不设置width，在最左边会被挤压成一列）
这只是一个很简单很简单的demo，我觉得要做的比较好一点，应该用convas ,设计两个convas ,一个用来显示背景，一个用来显示弹幕。希望有此相关经验的大神和网友能留言交流下，如果有相关的demo ，和代码分享 也是极好的。