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"
}]

posted on 2017-05-24 22:38 joken1310 阅读(3329) 评论(0) 编辑收藏举报

刷新页面返回顶部

joken-前端工程师