Use CSS and jquery to make a bullet screen

1. First look at the effect

2. Nonsense not much to say, directly on the code

1>html Code

<div class= "Barrage" >

<div class= "screen" ><div class= "Content" ><!--content is shown here -</div></div><!--Send dialog box --<div class= "Send" ><input type= "text" class= "S_text" placeholder= "use carriage return to quickly send the barrage"/><input type= "button" class= "s_btn" value= "Send"/><!--turn off the barrage function --<span class= "Barrage_close" > Close the Barrage </span></div></div>2>css Part*{padding:0;margin:0;}input{Outline:None;}. Barrage. Screen{width:100%;Height:100%;position:Absolute;Top:0px; Right:0px;background:URL(.. /img/1.jpg);background-size:cover;}. Barrage. screen. Content{position:relative;width:100%;Height:100%;background:#000;Opacity:0.5;/* Filter:alpha (opacity=100), *//*** for IE8 or earlier browsers ****/Background-color:Transparent;Z-index:1;}. Barrage{width:100%;Height:100%;}. Barrage. screen. Content Div{position:Absolute;font-size:20px;Font-weight:Bold;White-space:nowrap;Line-height:40px;Z-index: +;}. Barrage. Send{Z-index:1;width:100%;Height:55px;Line-height:55px;background:#000;position:Absolute;Bottom:0px;text-align:Center;}. Barrage. Send. S_text{width:600px;Height:40px;Line-height:40px;font-size:16px;font-family:"Microsoft Jas Black";Border-radius:20px;;}. Barrage. Send. s_btn{width:105px;Height:40px;background:#22B14C;Color:#fff;Border-radius:10px;}. Barrage_close{position:Absolute; Right:210px;Bottom:10px;width:80px;Height:20px;Border-radius:10px;text-align:Center;Line-height:20px;Color:#22B14C;background:#fff;Z-index: About;}. Barrage_close1{Color:#fff;background:#fff;}/ * CSS animation * /. Content Div{Animation:Text 15s Infinite Normal;}@keyframes Text{0%{ Left:100%;} 20%{ Left:75%;} 80%{ Left:0%;} 100%{ Left:-30%;}}3.js Part　　　　$(function () {//$ (". S_close"). Click (function () {//$ (". Barrage"). Toggle ("slow");// });//$ (". Barrage_close"). Toggle (function () {// })//init_animated ();Init_barrage();})//Put the contents of the barrage into the array and store it.//var arr=[];//var h=arr.Push()//Listen to send, press ENTER to sendDocument.onkeydown=function(Event){var e=Event||window.Event;if(e&&e.KeyCode== -){//Console.log (11111);$(". Send. S_btn").Click();}}//Submit a comment$(". Send. S_btn").Click(function() {var text=$(". S_text").Val();if(text=="") {Alert(' Your content is empty, please fill in the comments in resend ');return false;};var _lable=$("<div style= ' Right:20px;top:0px;opacity:1;color:"+GetColor() +"; ' class= ' Content_text ' > '+text+"</div>");$(". Content").Append(_lable.Show());Init_barrage();$(". S_text").Val("');})//Initialize Bullet screen technologyfunction Init_barrage() {var _top=0;$(". Content div").Show(). each(function() {var _left=$(window).width() -$( This).width();//Browser maximum width, as the value to locate leftvar _height=$(window).Height();//Browser Maximum height_top+= the;if(_top>= (_height- the)) {_top=0;}$( This).CSS({Left : _left,Top: _top,Color: GetColor() });//timed popup text//var time = 10000;//if ($ (this). Index ()% 2 = = 0) {//time = 15000;// }//$ (this). Animate ({left: "-" + _left + "px"}, time, function () {//$ (this). Remove ();// });});}//Get random colorsfunction GetColor() {return ' # '+ (function(h) {return New Array(7-h.length).Join("0") +h})((Math.Random() *0x1000000<<0).toString( -))}  3. Effect Demo View: HTTPS://LEADER755.GITHUB.IO/BARRRAGE/4. Source code get Address: Https://github.com/Leader755/Barrrage

Use CSS and jquery to make a bullet screen