js实现之静态弹幕

最新推荐文章于 2023-12-03 19:24:47 发布

原创最新推荐文章于 2023-12-03 19:24:47 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

js插件专栏收录该内容

81 篇文章

订阅专栏

本文探讨了使用JavaScript实现静态弹幕的两种方法：通过调整每个弹幕元素span的left属性值，以及利用CSS3的translate属性来实现弹幕位置的变化。这两种技术都是创建静态弹幕效果的有效途径。

这里写图片描述

实现方式可以分为两种：1.改变每个span 的left值；
2.利用css3 改变span的translate属性。

静态弹幕代码如下：

<!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;
        }
        .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;
            }
            createDiv(){
                let msgObj = {
                    color: randomColor(),
                    left: randomNumber(0,document.documentElement.clientWidth),
                    top: randomNumber(30,document.documentElement.clientHeight),
                }
                let span = `<span class="message" style="color:${msgObj.color};left:${msgObj.left}px;top:${msgObj.top}px">${this.msg}</span>`;
                $('#container').append(span);
            }
        }
        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)})`;
        }

        for(let i=0; i<20; i++){
            new Barrage("大哥点个"+i+"赞好不好").createDiv();
        }
    })
</script>
</body>
</html>