仿弹幕效果

效果图
<!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=['´哇塞好牛逼啊´','´好帅啊´','´前方高能´','´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 - 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>
猜你喜欢
