首页 > 代码库 > 弹幕效果
弹幕效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <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: 50px;} #danmu .newli{background-color: #fff;height: 50px;line-height: 50px;position: absolute;overflow: hidden;} </style></head><body> <div id="danmu"></div> <script> var danmu=document.getElementById(‘danmu‘); var winH=danmu.clientHeight; var speak=[‘哇塞好牛逼啊‘,‘好帅啊‘,‘前方高能‘,‘hahahahaha‘,‘哈哈哈哈‘,‘风流倜傥‘,‘我爱你阿啊啊啊‘,‘哈哈哈‘]; 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-50; 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 danmu=document.getElementById(‘danmu‘); var newliW=obj.clientWidth; var run=obj.offsetLeft; run--; if (run<=-newliW) { danmu.removeChild(obj); clearInterval(timer1); } obj.style.left=run+‘px‘; },1) } // insert(); var timer2=setInterval(function(){ insert(); },1000); window.onfocus=function (){ clearInterval(timer2); timer2=setInterval(function(){ insert(); },1000); } window.onblur=function (){ clearInterval(timer2); } </script></body></html>
弹幕效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。