JQuery + css3 bullet screens and jquerycss3 bullet screens

JQuery + css3 bullet screens and jquerycss3 bullet screens

I wrote a bullet screen function based on jQuery + css3. This function is intended for mobile wap. Using the change of displacement to implement the bullet screen function will make some low-performance mobile browser cards, so css3 is used, this function does not support non-webkit kernel browsers

Html section

Set your own style and define # the length, width, and area of danmu.

 

<div id="danmu"></div>

Js reference

$ ("# Danmu "). danmu ({minSpeed: 3000, maxSpeed: 5000, _ text: [// when color and fontSize are not set, {"text": "11111 ", "color": "#000", "fontSize": "14px" },{ "text": "222", "color": "# ff4141", "fontSize ": "14px" },{ "text": "333", "color": "#60c7d0", "fontSize": "16px" },{ "text ": "44", "color": "# ff8201", "fontSize": "14px" },{ "text": "5555", "color": "#10ad54 ", "fontSize": "18px" },{ "text": "666", "color": "#2c8ac0", "fontSize ": "20px"} // {"text": "11111"}, // {"text": "222"}, // {"text": "333 "}, // {"text": "44"}, // {"text": "5555"}, // {"text": "666"}]})

You can set a real-time sending bullet screen, which does not conflict with initialization. What you need to do is to spell an array to danmu.

$ ("# DanmuBtn "). click (function () {// trigger the publish information $ ("# danmu "). danmu ({_ text: [{"text": $ ("# danmuText "). val (), "fontSize": "24px"}]})}

 

Js Section

// On 2016 06 16 by wangmiao (function ($) {$. fn. danmu = function (o) {var defs = {minSpeed: 3000, maxSpeed: 5000, _ text: [], _ color: ['#333', '# ff4141 ', '# 60c7d0',' # ff8201 ',' #10ad54 ',' #2c8ac0 '], _ fontSize: ['14px', '16px ', '18px ', '20px ', '22px', '24px ']} var opt = $. fn. extend ({}, defs, o); var $ this = $ (this); var method = {creatEle: function () {if ($ this. find (". cont "). length = 0) {$ this. append ('<div class = "cont">)} $. each (opt. _ text, function (index, value) {var num = method. setRandomNum (0, 6); var color, fontSize; if (value. color) {color = value. color} else {color = opt. _ color [num]} if (value. fontSize) {fontSize = value. fontSize} else {fontSize = opt. _ fontSize [num]} var style = 'position: absolute; white-space: nowrap; left: '+ $ this. width () + 'px; color: '+ color +'; font-size: '+ fontSize +'; var speed = (method. setRandomNum (opt. minSpeed, opt. maxSpeed)/1000 ). toFixed (1); // obtain the random speed var delay = (method. setRandomNum (0,1000)/1000 ). toFixed (1); // obtain the random delay time in the range var top = method. setRandomNum (0, parseInt ($ this. height ()-30); // obtain the random vertical positioning style + = 'top: '+ top + 'px;-webkit-transition: all' + speed +'s linear;-webkit-transition-delay: '+ delay +'s;'; $ this. find (". cont "). append ('<span class = "text" style = "' + style + '">' + value. text + '</span>'); var time = parseInt (speed + delay) * 1500; method. clear ($ this. find (". text "). eq (index), time)}) method. moveing ()}, moveing: function () {var width = parseInt ($ this. width () $. each ($ this. find (". text "), function (index, value) {width + = parseInt ($ (this ). width (); ((this).css ({"-webkit-transform": "translate3d (" +-width + "px,)"})}, clear: function ($ obj, time) {console. log ($ obj, time) setInterval (function () {$ obj. remove ()}, time)}, setRandomNum: function (a, B) {return parseInt (a + (B-a) * Math. random ()}, init: function () {method. creatEle ()} method. init () }) (jQuery );