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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文实例为大家分享了js与jQuery技术实现表白弹幕，供大家参考，具体内容如下

js七夕表白弹幕效果简单版效果：

关键代码：

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

jQuery实现弹幕技术：

效果：

关键代码：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。