js之动态弹幕

最新推荐文章于 2021-07-03 15:43:17 发布

Albert_Tiger

最新推荐文章于 2021-07-03 15:43:17 发布

阅读量288

点赞数 1

分类专栏： js插件

本文链接：https://blog.csdn.net/qq_35425276/article/details/79594773

版权

js插件专栏收录该内容

81 篇文章 0 订阅

订阅专栏

动态代码如下：

本来想用 requestAnimationFrame()实现一个递归刷新，发现又jq的animate(),就偷个懒了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: #4DAAF0;
            overflow: hidden;
        }
        .message {
            position: absolute;
            left: 100px;
            padding: 5px;
            font-size: 25px;
            word-break: keep-all;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="container" id="container"></div>
<script src="jquery-1.7.1.min.js"></script>
<script>
    $(function () {
        class Barrage {
            constructor(msg){
                this.msg = msg;
                this.left = 0;
            }
            createDiv(i){
                let msgObj = {
                    color: randomColor(),
                    left: randomNumber(document.documentElement.clientWidth,document.documentElement.clientWidth+300),
                    top: randomNumber(30,document.documentElement.clientHeight-30),
                    time:randomNumber(8000,15000)
                }
                let span = `<span class="message" style="color:${msgObj.color};left:${msgObj.left}px;top:${msgObj.top}px">${this.msg}</span>`;
                let dom =$(span).appendTo($('#container'));
                $(dom).animate({
                    left:"-300px"
                },msgObj.time,function(){
                    $(this).remove();
                })
                console.log(msgObj.time);
            }

        }
        function randomNumber(min,max) {
            return Math.floor(Math.random()*(max-min)) + min;
        }
        function randomColor() {
            return `rgb(${randomNumber(0,256)},${randomNumber(0,256)},${randomNumber(0,256)})`;
        }

        let msgList = [
            "老铁礼物来一波",
            "666",
            "又是一个死太监",
            "我不是针对你",
            "我说在座的各位都是垃圾",
            "门焊死了",
            "这不是通往幼儿园的路",
            "我要下车"
        ]
        for(let i=0; i<msgList.length; i++){
            new Barrage(msgList[i]).createDiv();
        }
    })
</script>
</body>
</html>