jQuery制作弹幕

一：创建容器模拟直播窗口，发言框和发送按钮，并且父元素为下面子元素设置相对定位

二：想要实现弹幕的效果首先字体出现的高度和大小颜色都是随机产生的，所以说先封装一个函数来生成需要的随机数

三： 生成一个标签用来装载所输入的内容，为这个标签上设置所生成的随机高度字体大小颜色，设置绝对定位并且设置right达到从又像左的效果，设置自定义动画达成滚动效果。

四：最后为输入框设置键盘事件达到回车发送的效果

<style>
       *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .box{
			 width: 80%;
            height: 80%;
            border: 1px solid black;
            margin:  50px auto;
            position: relative;
            overflow: hidden;
	    }	
	 #text{
            width: 240px;
            height: 30px;
        }
      #btn{
            width: 80px;
            height: 35px;
            font-size: 14px;
        }
        #test{
	 		width: 100%;
	   		text-align: center;
}
</style>
 <script src="js/jquery.js"></script>
 <div id="box"> </div> //主要容器
 <div id="test">
        <input  type="text" id="text"/>
        <button type="button" id="btn">点击发送</button>
  </div> //发言和发送


<script>
		  var h = $("#box").css('height'); //获取容器的高度
        function random(){ //封装随机出字体颜色，弹幕距离容器的高度，字体大小
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            var a = Math.random();
            var bg = "rgba("+r+","+g+","+b+","+a+")";
            var top = Math.floor(Math.random()*parseInt(h));
            var size = Math.floor(Math.random()*20+20);
            var obj ={ 
                bg:bg,
                top:top,
                size:size
            }
            return obj;
        }

      
        $('#btn').click(function(){ //按钮的点击事件
            var text = $("#text").val(); //获取输入的值
            var obj = random(); //获取随机数对象
            if(!text) return false; //判断输入是否为空 否则不执行下面代码
            $('<span></span>').text(text) //生成span标签 并且将输入的值赋给span
                .css({
                'position':'absolute', 
                'width':200,
                'height':200,
                'font-size':obj.size+'px',
                'right':-200,
                'color':obj.bg,
                'top':obj.top
            }).animate({ //自定义动画达到滚动效果
                'right':2000
            },10000,'linear',function(){
                $(this).remove();//删除已经超出容器的span
            })
            .appendTo("#box"); //将生成的span放入容器中
            $('#text').val(''); //每发送一次就清空一次输入框
        })
	$('[type ="text"]').keyup(function(event){ //为输入框设置键盘事件
            if(event.keyCode ==13){ //13就是回车键
                $('#btn').click();
            }
        })
</script>