单机版简单弹幕墙demo (jqery+bootstrap)

 最近在看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>
View Code

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;
}
View Code

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())
}
View Code

其中为什么要设置 right: -that.width(), width: that.width()  ，是div 在创建的时候一个字一个字显示   ，在移除的一个字一个字移除（不设置width，在最左边会被挤压成一列）

这只是一个很简单很简单的demo，我觉得要做的比较好一点，应该用convas ,设计两个convas  ,一个用来显示背景，一个用来显示弹幕。希望有此相关经验的大神和网友能留言交流下，如果有相关的demo ，和代码分享 也是极好的。

 

posted @ 2016-08-08 17:20  gulp  阅读(505)  评论(0)  编辑  收藏  举报