您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“如何使用JavaScript實現(xiàn)彈幕效果”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用JavaScript實現(xiàn)彈幕效果”這篇文章吧。
看下效果:
由圖可以看出,我們的呆毛html結(jié)構(gòu)確實是非常簡單啦。
就是由一個div、一個input框另加一個button組成。
<div id="box" class="box"></div> <input type="text" id="txt" /> <button onclick="send()">提交內(nèi)容</button>
先po上js代碼:
function $(str) { return document.getElementById(str); } function send() { var word = $('txt').value; var span = document.createElement('span'); var top = parseInt(Math.random() * 500) - 20; var color1 = parseInt(Math.random() * 256); var color2 = parseInt(Math.random() * 256); var color3 = parseInt(Math.random() * 256); var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")"; top = top < 0 ? 0 : top; span.style.position = 'absolute'; span.style.top = top + "px"; span.style.color = color; span.style.left = '500px'; span.style.whiteSpace = 'nowrap'; var nub = (Math.random() * 10) + 1; span.setAttribute('speed', nub); span.speed = nub; span.innerHTML = word; $('box').appendChild(span); $('txt').value = ""; } setInterval(move, 200); function move() { var spanArray = $('box').children; for (var i = 0; i < spanArray.length; i++) { spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px'; } }
原理簡單說下:
第一步,我們要拿到input框里面的內(nèi)容,var word = $('txt').value;
第二步,我們就要把這個內(nèi)容想方設(shè)法地塞到要滾動顯示的div里面去了,原則有三:①顏色隨機②高度隨機③與左邊框的距離實時變化;
第三步,把這個內(nèi)容追加到div里 $('box').appendChild(span);
由上述步驟原理可以看出,第二步是最關(guān)鍵的一步,
實現(xiàn)第一個原則:
var color1 = parseInt(Math.random() * 256); var color2 = parseInt(Math.random() * 256); var color3 = parseInt(Math.random() * 256); var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")"; span.style.color = color;
小擴展:
RGB(R,G,B);
R:
紅色值。正整數(shù) | 百分數(shù)
G:
綠色值。正整數(shù) | 百分數(shù)
B:
藍色值。正整數(shù) | 百分數(shù)
這樣就應(yīng)該是很容易理解了。
實現(xiàn)第二個原則:
var top = parseInt(Math.random() * 500) - 20; top = top < 0 ? 0 : top; span.style.top = top + "px";
實現(xiàn)第三個原則:
span.style.left = '500px'; setInterval(move, 200); function move() { var spanArray = $('box').children; for (var i = 0; i < spanArray.length; i++) { spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px'; } }
就是利用了定時器的原理,讓left的值實時變化。
講到這里,就應(yīng)該很清晰明了了吧。
以上是“如何使用JavaScript實現(xiàn)彈幕效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。