js实现之静态弹幕

淩亂°似流年 2022-05-29 05:16 252阅读 0赞

![这里写图片描述][Image 1]

实现方式可以分为两种 ：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>

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js--直播弹幕

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

拼搏现实的明天。/ 2022年12月27日 14:11/ 0 赞/ 175 阅读

相关原生 JS 实现视频弹幕功能

![在这里插入图片描述][20201119213110775.gif_pic_center] 效果还行吧，大概就不到 150 行代码即可。快点学起来吧 ![在这里插入图

悠悠/ 2022年12月22日 11:11/ 0 赞/ 242 阅读

相关简易弹幕实现

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] html <style> da

深藏阁楼爱情的钟/ 2022年10月02日 09:46/ 0 赞/ 238 阅读

相关弹幕效果实现

前言昨天晚上11点了还没睡着，惆怅能力不足，但不知道怎么能快速的提升自己。呜呼哀哉，临睡前看了一个弹幕的效果实现的技术视频，听着很好的，自己在做电商这块也没写过弹幕。今

川长思鸟来/ 2022年09月25日 01:24/ 0 赞/ 283 阅读

相关 c语言控制台之弹幕实现

弹幕从从控制台的右端到控制台的左端，位置范围右端要能显示字符串，左端要>=0 结构体保存每个消息的内容移动速度颜色和初始位置(初始位置不能变，用于下次还原)

矫情吗；*/ 2022年07月12日 11:48/ 0 赞/ 219 阅读

相关 c语言控制台之弹幕实现

弹幕从从控制台的右端到控制台的左端，位置范围右端要能显示字符串，左端要>=0 结构体保存每个消息的内容移动速度颜色和初始位置(初始位置不能变，用于下次还原)

妖狐艹你老母/ 2022年07月12日 11:48/ 0 赞/ 194 阅读

相关 js之动态弹幕

动态代码如下：本来想用 requestAnimationFrame()实现一个递归刷新，发现又jq的animate(),就偷个懒了。 <!doctype html

短命女/ 2022年05月29日 05:17/ 0 赞/ 238 阅读

相关 js实现之静态弹幕

![这里写图片描述][Image 1] 实现方式可以分为两种：1.改变每个span 的left值； 2.利用css3 改变span的translate属性。

淩亂°似流年/ 2022年05月29日 05:16/ 0 赞/ 253 阅读

相关 Canvas弹幕实现

canvas知识绘制文字 let canvas = document.getElementById('canvas'); let ctx = ca

朱雀/ 2021年06月10日 20:38/ 0 赞/ 616 阅读

相关 js如何实现弹幕效果

js如何实现弹幕效果具体步骤如下： 1、编写HTML代码：创建一个弹幕显示墙，以及两个按钮，分别为“发送”和“清屏”，并在文本框中设置placeholder为“说点什...

灰太狼/ 2020年06月07日 15:47/ 0 赞/ 914 阅读