本文實例為大家分享了js實現(xiàn)彈幕墻效果的具體代碼，供大家參考，具體內(nèi)容如下

1.首先要考慮彈幕墻需要什么：一面墻，輸入框，發(fā)射按鈕，關(guān)閉和開啟彈幕按鈕，在此關(guān)閉和開啟設(shè)置為同一個按鈕；2.其次彈幕上墻以后需要移動，從墻的最右邊移動到最左邊，當(dāng)移動到最左邊時，這條彈幕就要消失；3.初步的想法應(yīng)該就是當(dāng)在輸入框輸入你要發(fā)送的內(nèi)容，點擊發(fā)送按鈕，在墻上會新建一個div來包含這條彈幕內(nèi)容，再給這個div相應(yīng)的移動動畫class；

4.彈幕顏色隨機，單條彈幕之間有間隔；

取隨機顏色這里用的是

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

首先，寫出它的靜態(tài)頁面；

<!--墻--><h1>彈幕墻</h1><div id='container'></div><!--彈幕發(fā)送關(guān)閉--><div class='s_c'> <input type='text' placeholder='說點什么'> <div class='btn'> <button id='sent'>發(fā)射彈幕</button> <button id='clear'>關(guān)閉彈幕</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 = [];//用于保存彈幕數(shù)據(jù)的數(shù)組；var start = true;//用于判斷是否需要開啟彈幕 $(document).ready(function(){ var showscreen = $('#container');//彈幕墻的div var showHeight = showscreen.height();//彈幕墻div的高度 var showWidth = showscreen.width();//彈幕墻div的寬度 //點擊發(fā)射按鈕事件 $('#sent').click(function(){ var text = $('#message').val();//獲取用戶輸入的待發(fā)送彈幕 $('#message').val('');//清空彈幕發(fā)送區(qū) arr.push(text);//將數(shù)據(jù)存入實現(xiàn)定義好的用于保存彈幕數(shù)據(jù)的數(shù)組 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); }) //按回車發(fā)送 $('input').keydown(function(event){ if(event.keyCode == 13){ $('#sent').trigger('click');//trigger觸發(fā)被選元素的指定事件類型，觸發(fā)#send事件的click類型 } }) if(start==false){ start = true; $('#clear').html('關(guān)閉彈幕'); run(); } //關(guān)閉/開啟彈幕按鈕點擊事件 $('#clear').click(function(){ if(start == true){start = false;$('#clear').html('開啟彈幕');showscreen.empty(); }else if(start == false){start = true;$('#clear').html('關(guān)閉彈幕');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();})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。