用jquery简单实现弹幕效果

首先html部分

<div id="box">
    <span>说些什么？</span>
    <input type="text" id="txt" value="弹幕"/>
    <input type="button" id="btn1" value="发送"/>
</div>

接下来css部分

 #box{
            width: 800px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        #txt{
            position: absolute;
            bottom: 20px;
            right: 280px;
        }
        #btn1{
            position: absolute;
            bottom: 20px;
            right: 230px;
        }
        span{
            position: absolute;
            bottom: 20px;
            right: 470px;
        }
        .content{
            display: inline-block;
            width: 100%;
            text-align: right;
            position: absolute;
            right: 0;
            top: 0;
        }

最后jquery部分

$(function(){
        $("#btn1").click(function(){
            var con=$("#txt").val();
            var span=$("<span class='content'>"+con+"</span>");
            var m=(Math.random()*440);
            var i=parseInt(Math.random()*255);
            var j=parseInt(Math.random()*255);
            var n=parseInt(Math.random()*255);
            var co=i+","+j+","+n;
            span.css("top",m);
            span.css("color","rgb("+co+")");
            $("#box").append(span);
            $(".content").animate({right:800+"px"},2000,function(){
                $(this).remove();
            })
        });
    })