最近在看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 ，和代码分享 也是极好的。

单机版简单弹幕墙demo (jqery+bootstrap)的更多相关文章

  1. 简单数学算法demo和窗口跳转,关闭,弹框

     简单数学算法demo和窗口跳转,关闭,弹框demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  2. Xamarin.Android再体验之简单的登录Demo

    一.前言 在空闲之余,学学新东西 二.服务端的代码编写与部署 这里采取的方式是MVC+EF返回Json数据,(本来是想用Nancy来实现的,想想电脑太卡就不开多个虚拟机了,用用IIS部署也好) 主要是 ...

  3. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  4. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  5. C#开发微信公众平台-就这么简单（附Demo）转载

    C#开发微信公众平台-就这么简单(附Demo)  来源:https://www.cnblogs.com/xishuai/p/3625859.html#!comments 写在前面 阅读目录: 服务号和 ...

  6. 通过flask实现web页面简单的增删改查bootstrap美化版

    通过flask实现web页面简单的增删改查bootstrap美化版 项目目录结构 [root@node1 python]# tree -L 2 . ├── animate.css ├── fileut ...

  7. C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序

    C#中缓存的使用   缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可:  <%@ Outp ...

  8. Maven+SpringMVC+Dubbo 简单的入门demo配置

    转载自:https://cloud.tencent.com/developer/article/1010636 之前一直听说dubbo,是一个很厉害的分布式服务框架,而且巴巴将其开源,这对于咱们广大程 ...

  9. jQuery写一个简单的弹幕墙

    概述 近几年由于直播,弹幕流行起来,之前看到过用js制作弹幕墙的思路,觉得很有趣.自己就花了点时间把他做成了更灵活的jQuery插件,现在分享出来. 详细 代码下载:http://www.demoda ...

随机推荐

  1. [AngularJS] Directive Definition Objects (DDO)

    This function that we just set up is what's called a link function, and it's actually a very small p ...

  2. oracle where 后面的条件中|| 是什么意思

    oracle where 后面的条件中|| 是连接符号,Oracle中另一个concat函数能够连接两个字符串 concat(a,b) Oracle中nvl函数的使用方法和作用是什么? 假设你某个字段 ...

  3. 【OC语法快览】四、基础内存管理

    Basic Memory Management                                                           基础内存管理 If you're w ...

  4. open和fopen的区别

    open和fopen的区别: 1.缓冲文件系统缓冲文件系统的特点是:在内存开辟一个“缓冲区”,为程序中的每一个文件使用,当执行读文件的操作时,从磁盘文件将数据先读入内存“缓冲区”, 装满后再从内存“缓 ...

  5. 基数树(radix tree)

    原文   基数(radix)树 Linux基数树(radix tree)是将指针与long整数键值相关联的机制,它存储有效率,并且可快速查询,用于指针与整数值的映射(如:IDR机制).内存管理等.ID ...

  6. [转]SQL快速入门

    原文出处:http://blog.csdn.net/xxd851116/article/details/5688263 一.基础 1.说明:创建数据库CREATE DATABASE database- ...

  7. 之前的Android项目报错，新建Android项目报错，代码中找不到错误解决方案

    打开一年前的东西,结果发现里面的android项目全部有个红叉,也找不到错误.新建一个项目也报错,首先确定自己的环境应该没问题,然后通过查看网上的资料,发现可能是debug的keystore到期啦. ...

  8. VMware EXSI 6.0 体验

    VMware EXSI 6.0 体验 导读 VMware 作为虚拟化行业的老大,占据了80%的市场份额.而在服务器虚拟化就不得不说 VMware vSphere ,这个组合包括了VMware EXSI ...

  9. [golang学习] goroutine调度

    这两天有些闲功夫, 学习下golang, 确实非常简洁. 不过有些缺憾. 在我的测试中. golang的调度(goroutine)似乎不是非常好. func say(k int) { fmt.Prin ...

  10. C#中的预处理器指令详解

    这篇文章主要介绍了C#中的预处理器指令详解,本文讲解了#define 和 #undef.#if.#elif.#else和#endif.#warning和#error.#region和#endregio ...