JQUERY+CSS3 Bomb Screen

Wrote a JQUERY+CSS3 based on the barrage function, this feature for mobile phone WAP, the use of changing the displacement to do the bomb screen function will make some low performance mobile browser card, so with the CSS3, this feature does not support non-WebKit kernel browser

HTML section

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

<id= "Danmu"></div>

JS Reference

$ ("#danmu"). Danmu ({minspeed:3000, Maxspeed:5000, _text: [//when color and fontsize are not set, they are randomly selected from the default values .{"Text": "11111", "Color": "#000", "fontSize": "14px"},        {"Text": "222", "Color": "#ff4141", "fontSize": "14px"},        {"Text": "333", "Color": "#60c7d0", "fontSize": "16px"},        {"Text": "$", "color": "#ff8201", "fontSize": "14px"},        {"Text": "5555", "Color": "#10ad54", "fontSize": "18px"},        {"Text": "666", "Color": "#2c8ac0", "fontSize": "20px"}//{"text": "11111"},//{"text": "222"},//{"text": "333"},//{"text": "$"},//{"text": "5555"},//{"text": "666"}    ]})

can set the real-time send the barrage, does not follow the initialization conflict, all you need to do is to fight the array to Danmu

$ ("#danmuBtn"). Click (function() {/// publish information to trigger    $ ("#danmu"). Danmu ({        _ text:[{"text": $ ("#danmuText"). Val (), "fontSize": "24px"}]     })

JS section

//On + by Wangmiao(function($) {$.fn.danmu=function(o) {varDefs ={minspeed:3000, Maxspeed:5000, _text:[], _color:[' #333 ', ' #ff4141 ', ' #60c7d0 ', ' #ff8201 ', ' #10ad54 ', ' #2c8ac0 '], _fontsize:[' 14px ', ' 16px ', ' 18px ', ' 20px ', ' 22px ', ' 24px ']        }        varopt =$.fn.extend ({}, defs, O); var$ This= $( This); varMETHOD ={createle:function(){                if($ This. Find (". Cont"). length==0){                    $ This. Append (' <div class= ' cont "style=" width:100%; height:100%; position:relative "></div>")} $.each (Opt._text,function(index,value) {varnum = Method.setrandomnum (0,6); varcolor,fontsize; if(Value.color) {color = Value.color}Else{color =Opt._color[num]}if(value.fontsize) {fontSize = value.fontsize}Else{fontSize =Opt._fontsize[num]}varstyle = ' position:absolute;white-space:nowrap; Left: ' +$ This. width () + ' Px;color: ' +color+ '; font-size: ' +fontsize+ '; '; varSpeed = (Method.setrandomnum (opt.minspeed,opt.maxspeed)/1000). toFixed (1); Get random velocity in rangevarDelay = (Method.setrandomnum (0,1000)/1000). toFixed (1);//Get the range of random delay timevartop = Method.setrandomnum (0,parseint ($ This. Height ())-30);//get random vertical positioning within rangeStyle + = ' top: ' +top+ ' Px;-webkit-transition:all ' +speed+ ' s linear;-webkit-transition-delay: ' +delay+ '; '; $ This. Find (". Cont"). Append (' <span class= "text" style = "' +style+ '" > ' +value.text+ ' </span> '); varTime = parseint (speed+delay) *1500; Method.clear ($ This. Find (". Text"). EQ (index), Time)}) method.moveing ()}, moveing:< /c2>function(){                varwidth = parseint ($ This. Width ()) $.each ($ This. Find (". Text"),function(index,value) {width+ = parseint ($ ( This). width ()); $( This). css ({"-webkit-transform": "Translate3d (" +-width+ "px,0,0)"})} , clear:function($obj, time) {Console.log ($obj, Time) setinterval (function() {$obj. Remove ()},time)}, Setrandomnum:function(A, b) {returnparseint (A + (b-a) *math.random ())}, init:function() {Method.createle ()}} method.init ()}) (jQuery);

JQUERY+CSS3 Bomb Screen