Renderings
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>仿弹幕效果</title> <style> *{margin: 0;padding: 0;list-style: none;} html,body{width: 100%;height: 100%;} body{background-color: #000;font-family: '微软雅黑';} #danmu{position: relative;height: 100%;width: 100%;overflow: hidden;font-size: 14px;background:url(img/bg.png) no-repeat center;background-size:cover;} #danmu .newli{background-color: #000;height: 30px;line-height: 30px;position: absolute;overflow: hidden;color:#fff;} </style> </head> <body> <div id="danmu"></div> <script> var danmu = document.getElementById ( ' danmu ' ); var winH = danmu.clientHeight; var Speak = [ ' ' Wow good Niubi ah ' ' , ' ' handsome ah ' ' , ' ' in front of the high-energy ' ' , ' ' hahahahaha' ' , ' 'ha ha ha' ' , ' 'suave' ' , ' 'I love you Ah ah ah ah' ' , ' 'ha ha ha' ' ]; function insert(){ var newli=document.createElement('div'); var randomS=Math.floor(Math.random()*8); var r=Math.floor(Math.random()*266); var g=Math.floor(Math.random()*266); var b=Math.floor(Math.random()*266); newli.innerHTML=speak[randomS]; newli.className='newli'; newli.style.color='rgb('+ r +','+ g +','+ b +')'; var t=winH - 30; var newliT=Math.floor(Math.random()*(t-1)); var newliL=danmu.clientWidth; newli.style.left=newliL +'px'; newli.style.top=newliT +'px'; danmu.appendChild(newli); move(newli); } function move(obj){ var timer1=setInterval(function(){ var newliW=obj.clientWidth; var run=obj.offsetLeft; run--; if (run<=-newliW) { danmu.removeChild(obj); clearInterval(timer1); } obj.style.left=run +'px'; },10) } insert(); var timer2=setInterval(function(){ insert(); },500); </script> </body> </html>