发射
            清屏
            
        

    

$(document).ready(function(){
        $(".act").click(function(){  
            //点击发射后
            //得到输入的弹幕     
            var input = $(":input").val();
            //将输入的弹幕包裹在p标签内
            var danmu = $("
" + input + "<\/p>");
            //将弹幕以p标签形式加进弹幕框                           
            $(".screen").append(danmu);
            //弹幕右边距
            var right = parseInt($(".screen").css("marginRight"));
            //弹幕可以出现的最上面的位置                           
            var top_loc = parseInt($(".screen").css("marginTop"));
            //弹幕可以出现的最下面的位置
            var bottom_loc = parseInt($(".screen").css("height"));
            //设置弹幕出现的范围
            var location = Math.floor(Math.random() * Math.floor(bottom_loc/25)) * 25 + top_loc;
            $(danmu).css({                             
                "right":right + "px",
                "top":location + "px"
            });
            //弹幕完全滑出弹幕框所需宽度
            var dis = right - parseInt($(danmu).css("width"));
            //弹幕滑出动画
            $(danmu).animate({left:dis},12000);
            //清空输入框内的内容方便再次输入
            $(":input").val("");
        })
})

*{
    padding: 0;
    margin: 0;
}
/*弹幕框*/
.screen{
    width: 1300px;
    height: 380px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    
    margin: 25px auto;
    overflow: hidden;
}
/*操作栏的输入框*/
.operate input{
    display: block;
    margin: 0 auto;
    padding-left: 10px;

    width: 400px;
    height: 35px;
    
    border-radius: 3px;
    border: 1px solid #cccccc;
}
/*操作栏*/
.operate p{
    text-align: center;

}
/*操作栏的按钮*/
.operate p button{
    background-color: #fff;
    color: #b0a8a5;
    letter-spacing: 4px;

    width: 160px;
    height: 35px;
    margin-top: 25px;

    border: 1px solid #b0a8a5;
    border-radius: 3px;
}
/*操作栏的发射按钮*/
.operate p button:first-child{
    border-color: red;
    color: red;
}
/*用户输入的弹幕*/
.actDanmu{
    position:absolute;

    line-height: 25px;

    padding: 0;
    margin: 0;
}