jQuery实现评论弹幕弹幕漂浮滚动代码

Posted 2020-09-19 jake-前端工程师

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现评论弹幕弹幕漂浮滚动代码相关的知识，希望对你有一定的参考价值。

1、html代码和jquery代码:

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0, minimun-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <script type="text/javascript" src="js/auto_rem.js"></script>
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <header class="fixed top-nav">
        <a class="back"></a>
        <span class="title">公屏</span>
        <a class="home"></a>
    </header>
    <div class="gp-body">
        <div class="main-box">
            <ul class="all-list">
            </ul>
        </div>
        <div class="fixed send-ms flex">
            <div class="ipt s_txt flex1" contenteditable="true"></div>
            <span class="btn s_btn">发送</span>
        </div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    //发表评论
    $.getJSON(\'./js/test.json\', function(result) {
        actFn($(\'.all-list\'), result)
    })

    function actFn(tar, data) {
        var data = data;
        startTranslate();
        appendNewItem();

        function startTranslate() {
            var key = 0;
            var leng = data.length;
            var time = setInterval(function() {
                if (key >= leng) {
                    clearInterval(time);
                    return;
                };
                var _html = itemHtml(data[key].img_src, data[key].grade, data[key].words)
                key++;
                tar.append(_html);
                translateFn();
            }, 400);
        }

        function appendNewItem() {
            $(".s_btn").click(function() {
                var text = $(".s_txt").html();
                if (text == \'\') return;
                var _html = itemHtml(\'./img/heads.png\', \'最强王者\', text)
                tar.prepend(_html);
                $(".s_txt").html(\'\');
                translateFn();
            });
        }

        function itemHtml(img, grade, words) {
            var _html = "<li class=\'item\'>" +
                "<span class=\'img-box\'>" +
                "<img src=\'" + img + "\' alt=\'\'>" +
                "</span>" +
                "<p class=\'para\'>" +
                "<em class=\'grade\'>" + grade + "</em>" +
                "<span class=\'words\'>" + words + "</span>" +
                "</p>" +
                "</li>";
            return _html;
        }

        var initTop = 20;
        var _top = initTop;

        function translateFn() {
            tar.find("li[class!=\'had\']").show().each(function(item, key) {
                if ($(this).hasClass(\'had\')) return;
                var that = this;
                var twidth = $(this).width();
                var _left = $(window).width() + twidth;
                var rd = Math.random() * 100;
                var rdColor = getRandomColor();
                var _height = $(window).height();
                var time = 20000;
                if (_top > _height - 150) {
                    if (initTop == 20) {
                        _top = initTop = 60;
                    } else {
                        _top = initTop = 20;
                    }
                }
                $(this).find(\'.grade\').css({
                    color: rdColor
                })
                $(this).css({
                    top: _top,
                    right: "-" + twidth + "px"
                });
                $(this).css({
                    transform: "translateX(-" + (_left + rd + 200) + "px)"
                }).addClass(\'had\');
                _top = _top + 80;
            });
        }


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

//初始化弹幕
</script>

</html>

2、scss代码:

.gp-body {
    @extend .main;
    width: 100%;
    height: 100%;
    .main-box {
        background: url("../img/gp-bg.jpg") no-repeat;
        background-size: 100% 100%;
        height: 100%;
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;
        .all-list {
            position: relative;
        }
        .item {
            display: inline-block;
            position: absolute;
            top: 0;
            right: -100%;
            display: none;
            transition: transform 12s ease-in-out;  //css设置移动的时间及表现
            ;
     
            .para {
                color: white;
                font-size: 14px;
                line-height: 37px;
                display: inline-block;
                overflow: hidden;
                border-radius: 20px;
                background: rgba(0, 0, 0, 0.6);
                padding: 0 10px;
                max-width: 400px;
                white-space: nowrap;
                text-overflow: ellipsis;
                .grade {
                    margin-right: 3px;
                }
            }
            .img-box {
                float: left;
                img {
                    width: 35px;
                    height: 35px;
                    border-radius: 100%;
                    margin-right: 5px;
                }
            }
        }
    }
}

评论弹幕的主要思想是重看不到的屏幕位置移动到屏幕看到的位置，最后消失，所以需要移动，这里采用的是css3 的translate 方法，可以实现目标的移动而在移动端不卡顿。

至于每条屏幕的飘移过程中之间的位置关系需要良好的设置，比如间隔时间插入每条评论，这样就会在垂直位置上错开，还有就是top位置的关系上的调节等，比如奇数排设置top20，偶数排设置60，这样又可以错开水平方面的每条评论的位置。如下的错开:

以下是最终效果图:

以下是demo数据:

[{
    "img_src": "./img/heads.png",
    "grade": "最强王者",
    "words": "灯笼裤飞机失控打笼裤飞机失控打笼裤飞机失控打笼裤飞机失控打笼裤飞机失控打笼裤飞机失控打飞机"
}, {
    "img_src": "./img/heads.png",
    "grade": "最强王者",
    "words": "灯笼裤飞机失控飞机失控飞机失控打飞机"
}, {
    "img_src": "./img/heads.png",
    "grade": "最强王者",
    "words": "灯笼裤飞机失控打飞机"
}, {
    "img_src": "./img/heads.png",
    "grade": "最强王者",
    "words": "灯笼裤飞机失控飞机失控飞机失控打飞机"
}, {
    "img_src": "./img/heads.png",
    "grade": "最强王者",
    "words": "灯笼裤飞机失控飞机失控飞机失控打飞机"
}, {
    "img_src": "./img/heads.png",
    "grade": "荣耀黄金",
    "words": "灯笼裤飞机失控打飞机"
}, {
    "img_src": "./img/heads.png",
    "grade": "最强王者",
    "words": "灯笼裤飞机失控打飞机last"
}]

以上是关于jQuery实现评论弹幕弹幕漂浮滚动代码的主要内容，如果未能解决你的问题，请参考以下文章

又一枚精彩的弹幕效果jQuery实现

js实现bilibili弹幕列表随视频播放滚动

用Python写一个自动下载视频弹幕评论的软件（2022最新）

关于弹幕效果的实现

workerman实现简单弹幕的方法

mpvue小程序开发之实现一个弹幕评论