js实现弹幕

作者: 新篇章 | 来源:发表于2018-01-11 20:34 被阅读0次

js实现简单弹幕并滚动
js实现弹幕
js实现弹幕
JS弹幕实现
JQuery实现简单的弹幕效果
前端js实现弹幕，怎么控制弹幕不重叠
Flutter 实现虎牙/斗鱼弹幕效果
弹幕组件（一）
Android弹幕实现现状与原理浅析
弹幕刷屏之术——Android无时间线弹幕实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>javascript弹幕</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  
    <style>
        #play{
            width:600px;
            height:500px;
            background-color:#000;
        }
          
        #tangmu{
            width:600px;
            height:500px;
            background-color:#fff;
            z-index:9999;
            background-color: rgba(000, 1, 000, 0.1); 
        }
          
        #textStyle{
            position:absolute;
            font-size:24px;
            color:#fff;
        }
    </style>
      
 </head>
  
 <body>
    <div id="play">
        <div id="tangmu">
              
        </div>
    </div>
      
    <input type="text" id="text" value="这是弹幕..."/><input type="button" value="发送" onClick="tangmu();"/>
      
    <script>
        var si;
        function tangmu(){
            clearInterval(si);
            var text = document.getElementById("text");
            var tangmu = document.getElementById("tangmu");
  
            var textStyle="<font id=\"textStyle\">"+text.value+"</font>";
              
            mathHeight = Math.round(Math.random()*tangmu.offsetHeight)+"px";
  
            var textLeft=tangmu.offsetWidth+"px";
              
            tangmu.innerHTML=textStyle;
              
            var textStyleObj = document.getElementById("textStyle");
              
            textStyleObj.style.left=textLeft;
            textStyleObj.style.top=mathHeight;
              
            var x=parseInt(textStyleObj.style.left);
              
            si = setInterval("xunhuan("+x+")",100);
              
        }
        function xunhuan(left){
            var textStyleObj = document.getElementById("textStyle");
            textStyleObj.style.left=left;
              
            var x=parseInt(textStyleObj.style.left);
  
            if(x<textStyleObj.style.width){
                document.getElementById("tangmu").innerHTML="";
                clearInterval(si);
            }else{
                x-=18;
            }
              
            textStyleObj.style.left=x+"px";
        }
    </script>
      
 </body>
</html>

网上copy的