js实现七夕表白弹幕效果 jQuery实现弹幕技术

<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>

<script src="jquery-1.11.1.js"></script>
<script>

    $(function () {
        $(".showBarrage,.s_close").click(function () {
            $(".barrage,.s_close").toggle("slow");
        });
        init_barrage();
    })

    //提交评论
    $(".send .s_btn").click(function () {
        var text = $(".s_text").val();
        if (text == "") {
            return;
        }

        var _lable = $("<div style='right:20px;top:0px;opacity:1;color:"   getRandomColor()   ";'>"   text   "</div>");
        $(".mask").append(_lable.show());
        init_barrage();
    })

    //初始化弹幕技术
    function init_barrage() {
        var _top = 0;
        $(".mask div").show().each(function () {
                    var _left = $(window).width() - $(this).width();//浏览器最大宽度，作为定位left的值
                    var _height = $(window).height();//浏览器最大高度
                    _top  = 75;
                    if (_top >= (_height - 130)) {
                        _top = 0;
                    }
                    $(this).css({left: _left, top: _top, color: getRandomColor()});

                   //定时弹出文字
                    var time = 10000;
                    if ($(this).index() % 2 == 0) {
                        time = 15000;
                    }

                    $(this).animate({left: "-"   _left   "px"}, time, function () {
                        $(this).remove();
                    });

                }
        );

    }

    //获取随机颜色
    function getRandomColor() {
        return '#'   (function (h) {
                    return new Array(7 - h.length).join("0")   h
                })((Math.random() * 0x1000000 << 0).toString(16))
    }

</script>