Jquery实现弹幕效果

用jquery写了一个弹幕的小功能，供大家参考学习。

前端显示

<span style="font-size:18px;"><div class="boxDom" id="boxDom">
    <div class="idDom" id="idDom">
        <div class="content">
            <p class="title">吐槽:</p>
            <input type="text" class="text" id="text" />
            <button type="button" class="btn" id="btn">发射</button>
        </div>
    </div>
</div></span>

样式

 <span style="font-size:14px;">html,body{margin:0px;padding:0px;width: 100%;height:100%;font-family: "微软雅黑";font-size: 62.5%;background: #ccc;}
    .boxDom {
        width:100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    .idDom {
        width: 100%;
        height: 60px;
        background: #666;
        position: fixed;
        bottom: 0px;
    }
    .content {
        display: inline-block;
        width:430px;
        height: 40px;
        position: absolute;
        left: 0px;
        right: 0px;
        top:0px;
        bottom:0px;
        margin:auto;
    }
    .title {
        display: inline;
        font-size: 4em;
        vertical-align:bottom;
        color:#fff;
    }
    .text {
        border:none;
        width:300px;
        height: 30px;
        border-radius: 5px;
        font-size: 2.4em;
    }
    .btn {
        width:60px;
        height: 30px;
        background: #f90000;
        border:none;
        color:#fff;
        font-size: 2.4em;
    }
    .string {
        width:300px;
        height: 40px;
        position: absolute;
        overflow: hidden;
        color:#000;
        font-size: 4em;
        line-height: 1.5em;
        cursor: pointer;
        white-space:nowrap;
    }</span>

JS

<span style="font-size:14px;"> $(function(){
        var pageW=parseInt($(document).width());	//获取页面宽度
        //alert(pageW);
        var pageH=parseInt($(document).height());	//获取页面高度
        var boxDom=$("#boxDom");
        var btnDom=$("#btn");
        var Top,Right;
        var width;
        width=pageW;
        var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
        btnDom.bind("click",auto);
        function auto(){
            var creSpan=$("<span class='string'></span>");
            var text=$("#text").val();
            //alert(text);
            creSpan.text(text);
            //alert(creSpan.text());
            Top=parseInt(pageH*(Math.random()));
            var num=parseInt(colorArr.length*(Math.random()));
            if(Top>pageH-90){
                Top=pageH-90;
            }
            //creSpan.css({"top":Top,"right":-300,"color":colorArr[num]});
            creSpan.css({"top":Top,"right":-300,"color":getRandomColor()});//扩展字幕颜色
            boxDom.append(creSpan);
            var spanDom=$("#boxDom>span:last-child");
            //alert(spanDom.html());
            spanDom.stop().animate({"right":pageW+300},10000,"linear",function(){
                        $(this).remove();
                    });
        }
        function getRandomColor(){
            return '#' + (function(h){
                return new Array(7 - h.length).join("0") + h;
            })((Math.random() * 0x1000000 << 0).toString(16));
        }
   });</span>

看一张效果图：

效果还可以，当然还有需要改进的地方，比如弹幕出现在了底部的需要重新计算Top的值；另外想抽时间利用Ajax设计数据库，对发言的数据进行后台保存。