本文實例講述了JS實現(xiàn)的視頻彈幕效果。分享給大家供大家參考,具體如下:
我們提供的服務(wù)有:成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、息烽ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的息烽網(wǎng)站制作公司
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>斗魚彈幕</title> <style> html,body{font-size:10px;overflow:hidden;margin:0;padding:0;} #box{width:100%;height:100%;} #dm{width:100%;height:90vh;background:#E8F1F5;} #dm span{width:auto;height:3rem;font-size:2rem;line-height:2rem;position:absolute;white-space:nowrap;} #idDom{width:100%;height:10vh;background:#666;position:absolute;bottom:0;display:flex;align-items:center;justify-content:center;} #content{width:50rem;height:10vh;display:flex;align-items:center;justify-content:center;} .title{font-size:2.2px rein;color:#fff;line-height:#ccc;} .text{width:30rem;height:2.5rem;border:none;border-radius:.5rem;font-size:1.4rem;margin:0 .5rem;padding:0 1rem;} .btn{width:6rem;height:3rem;border:none;background:red;color:#fff;} </style> </head> <body> <div class="box" id="box"> <div id="dm"></div> <div class="idDom" id="idDom"> <div id="content"> <p class="title">吐槽:</p> <input type="text" class="text" id="text" placeholder="請輸入你想說的話" /> <button type="button" class="btn" id="btn">發(fā)射!</button> </div> </div> </div> <script langugae="javascript"> var timer; var btn = document.getElementById('btn'); btn.onclick = function() { addBarrage();} document.onkeydown = function(evt) {var event = evt || window.event;if (event.keyCode == 13) {addBarrage();}} var colors = ['#2C3E50', '#FF0000', '#1E87F0', '#7AC84B', '#FF7F00', '#9B39F4', '#FF69B4'];//彈幕顏色庫 function addBarrage() { clearInterval(timer); var text = document.getElementById('text').value; document.getElementById('text').value = ""; var index = parseInt(Math.random() * colors.length); //隨機彈幕顏色 var screenW = window.innerWidth; var screenH = dm.offsetHeight; var max = Math.floor(screenH / 40); var height = 10 + 40 * (parseInt(Math.random() * (max + 1)) - 1); var span = document.createElement('span'); span.style.left = screenW + 'px'; span.style.top = height + 'px'; span.style.color = colors[index]; span.innerHTML = text; var dmDom = document.getElementById('dm'); dmDom.appendChild(span); timer = setInterval(move, 10); } function move() { var arr=[]; var oSpan=document.getElementsByTagName('span'); for(var i=0;i<oSpan.length;i++){ arr.push(oSpan[i].offsetLeft); arr[i] -= 2; oSpan[i].style.left = arr[i]+'px'; if(arr[i]<-oSpan[i].offsetWidth){ var dmDom=document.getElementById('dm'); dmDom.removeChild(dmDom.childNodes[0]); } } } </script> </body> </html>
運行效果如下圖所示:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun,測試代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript動畫特效與技巧匯總》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
本文名稱:JS實現(xiàn)的視頻彈幕效果示例
當前地址:http://muchs.cn/article22/jpehcc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護、移動網(wǎng)站建設(shè)、網(wǎng)站改版、定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)、域名注冊
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)