js实现弹幕墙效果

本文实例为大家分享了js实现弹幕墙效果的具体代码，供大家参考，具体内容如下

1.首先要考虑弹幕墙需要什么：一面墙，输入框，发射按钮，关闭和开启弹幕按钮，在此关闭和开启设置为同一个按钮；2.其次弹幕上墙以后需要移动，从墙的最右边移动到最左边，当移动到最左边时，这条弹幕就要消失；3.初步的想法应该就是当在输入框输入你要发送的内容，点击发送按钮，在墙上会新建一个div来包含这条弹幕内容，再给这个div相应的移动动画class；

4.弹幕颜色随机，单条弹幕之间有间隔；

取随机颜色这里用的是

'#'+(Math.random()*0x1000000<<0).toString(16)

首先，写出它的静态页面；

<!--墙--><h1>弹幕墙</h1><div id='container'></div><!--弹幕发送关闭--><div class='s_c'> <input type='text' placeholder='说点什么'> <div class='btn'> <button id='sent'>发射弹幕</button> <button id='clear'>关闭弹幕</button> </div></div>

css样式

#container{ /*width:700px;*/ height:500px; margin:50px 100px; border:solid 2px #7a2a1d;}h1{ text-align:center;}.s_c{ width:500px; margin:0 auto;}#message{ width:400px; height:30px; margin:0 auto; position:relative; left:50px;}.btn{ padding-top:20px; height:30px; margin-left:150px;}#sent,#clear{ width:100px;}

js代码部分：

var arr = [];//用于保存弹幕数据的数组；var start = true;//用于判断是否需要开启弹幕 $(document).ready(function(){ var showscreen = $('#container');//弹幕墙的div var showHeight = showscreen.height();//弹幕墙div的高度 var showWidth = showscreen.width();//弹幕墙div的宽度 //点击发射按钮事件 $('#sent').click(function(){ var text = $('#message').val();//获取用户输入的待发送弹幕 $('#message').val('');//清空弹幕发送区 arr.push(text);//将数据存入实现定义好的用于保存弹幕数据的数组 var send_div=$('<div>'+text+'</div>'); showscreen.append(send_div); // var send_text=$('<div>+text+</div>');//新建div弹幕条 // var send_div = document.createElement('div'); // var inner = document.createTextNode(text); // send_div.appendChild(inner); // document.getElementById('container').appendChild(send_div)//把弹幕挂在墙上 move_text(send_div); }) //按回车发送 $('input').keydown(function(event){ if(event.keyCode == 13){ $('#sent').trigger('click');//trigger触发被选元素的指定事件类型，触发#send事件的click类型 } }) if(start==false){ start = true; $('#clear').html('关闭弹幕'); run(); } //关闭/开启弹幕按钮点击事件 $('#clear').click(function(){ if(start == true){start = false;$('#clear').html('开启弹幕');showscreen.empty(); }else if(start == false){start = true;$('#clear').html('关闭弹幕');run() } }); var topMin = showscreen.offset().top; var topMax = topMin+showHeight; var top = topMin; var move_text = function(obj){ obj.css({ display:'inline', position:'absolute' }) var begin = showscreen.width() - obj.width(); //一开始的起点 top+=50; if(top > topMax-50){ top = topMin; } //console.log('showscreenWidth'+showscreen.width()); //console.log('objWidth',obj.width()); obj.css({ left:begin, top:top, color:getRandomColor() }); var time = 20000 + 10000*Math.random(); obj.animate({ left:'-'+begin+'px' },time,function(){ obj.remove(); }); }; var getRandomColor = function(){ return ’#’+(’00000’+(Math.random()*0xffffff <<0).toString(16)).substr(-6); } var run = function(){ if(start == true){if(arr.length > 0){ var n = Math.floor(Math.random()* arr.length + 1)-1; var textObj = $('<div>'+arr[n]+'</div>'); showscreen.append(textObj); //console.log('loop:'+textObj.html()); move_text(textObj);} } setTimeout(run,3000); } jQuery.fx.interval = 50; run();})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。