barrage.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
(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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!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的简单实现的版本,有需要的朋友……