你的位置:首页 > 网页设计

[网页设计]弹幕效果


<!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>