js怎么实现弹幕功能

这篇文章主要介绍“js怎么实现弹幕功能”，在日常操作中，相信很多人在js怎么实现弹幕功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”js怎么实现弹幕功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

本文实例为大家分享了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>

到此，关于“js怎么实现弹幕功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！