js之动态弹幕

短命女 2022-05-29 05:17 176阅读 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>