弹幕效果

Posted 2020-08-08 骑猪敲代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹幕效果相关的知识，希望对你有一定的参考价值。

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

以上是关于弹幕效果的主要内容，如果未能解决你的问题，请参考以下文章