简单弹幕实现 – 云原生导航

内容目录

barrage.js

(function() {
  
  var root = this;
  var array = [];
  var push = array.push;
  var slice = array.slice;
  var splice = array.splice;
 
  // The top-level namespace.
  var Barrage;
  if ( typeof exports !== 'undefined') {
    Barrage = exports;
  } else {
    Barrage = root.Barrage = {};
  }
 
  // Current Version of Barrage
  Barrage.VERSION = '0.0.1';
 
  // extends the jquery
  Barrage.$ = root.jQuery;
 
  Barrage.config = {
 
    'color' : ['red', 'blue', 'black', 'orange', 'white'],
    'font_family' : ['Monaco'],
    'font_size' : ['18px', '20px', '24px', '28px'],
    'speed' : [10000,9000,8000,7000,6000,5000,4000 ]
  };
 
  Barrage.random = function(len) {
    return Math.random() * len;
  };
  var bullet = Barrage.bullet = (function() {
 
    var _font_family;
    var _font_size;
    var _color;
    var _speed;
    var _x_pos;
    var _y_pos;
    
    var random_render = function(config_item) {
 
      return config_item[Math.floor(Barrage.random(config_item.length))];
    };
    
    var launch = function(objects, pose) {
 
      _font_size = objects.font_size || random_render(Barrage.config.font_size);
      _font_family = objects.font_family || random_render(Barrage.config.font_family);
      _color = objects.color || random_render(Barrage.config.color);
      _speed = objects.speed || random_render(Barrage.config.speed);
      _y_pos = objects.y_pos || Math.random() * window.innerHeight;
 
      console.log(_font_size);
      console.log(_font_family);
      console.log(_color);
      console.log(_speed);
      console.log(_y_pos);
      console.log("=============");
    
      if (!objects.content) return;
 
      var words = Barrage.$("<b>" + objects.content + "</b>");
      words.css("font-size", _font_size);
      words.css("font-family", _font_family);
      words.css("color", _color);
      words.css("right", 0);
      words.css("position", "absolute");
      words.css("top", _y_pos);
      words.attr("zoom", 1000);
      $("body").append(words);
      Barrage.$(words).animate({
        "right" : window.innerWidth
        }, _speed, function() {
          console.log("finished!");
      });
    };
 
    return {
      launch : launch
    };
  })();
 
  var Action = Barrage.Action = {
 
  };
}).call(this);

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  <script type="text/javascript" src="jquery-2.1.0.js" ></script>
  <script type="text/javascript" src="barrage.js"></script>
</head>
 
<body style="display:block; background-image:url(./42987027.jpg)">
  <div id="page" style="width:100%; height:100%;">
  </div>
</body>
<script type="text/javascript">
  
  var heitan = {};
  heitan.y_pos = 300;
  heitan.content = "1111";
  Barrage.bullet.launch(heitan, "");
 
  var heitan = {};
  heitan.y_pos = 350;
  heitan.content = "12222!";
  Barrage.bullet.launch(heitan, "");
 
  var heitan = {};
  heitan.y_pos = 150;
  heitan.content = "3333!";
  Barrage.bullet.launch(heitan, "");
 
  var heitan = {};
  heitan.y_pos = 20;
  heitan.content = "44444!!!!";
  Barrage.bullet.launch(heitan, "");
</script>
</html>

【提醒】test.html的jquery,和body里的图片请自行替换

2016年8月更新提示

最近整理了一份php+js+ajax的简单实现的版本，有需要的朋友可以看看呢

https://github.com/chenjiesuper/danmu

2 Comments

点点滴滴滴 2016年7月26日

多谢楼主的分享。
弹幕除了楼主所演示的动态效果外，还有一个非常重要的一个实现，那就是如何实现其他人可以收到你的弹幕，怎样做到实时。
就此，我在这里做个补充，希望对大家有用。要实现实时推送与接收，那么就涉及到了另一个技术点web实时消息推送，以往大家都基本上是用ajax，轮询来自己实现，但是这样做有个缺陷那就是非常浪费客户端资源增加服务器端的负担。个人推荐使用第三方推送服务，例如goeasy推送就是个非常简单稳定的服务。
实现了实时推送，那么整个弹幕功能就更完整了。 😛 😛

- chenjie 2016年7月26日
  
  php借助扩展swoole的通信能力或者 node来实现全双工的websocket都是可以的。

发表回复