简易弹幕实现

深藏阁楼爱情的钟 2022-10-02 09:46 218阅读 0赞

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

html

<style>
        #danmu {
            position: absolute;
            top: 5%;
            font-size: 16px;
            width: 100%;
            height: 80%;
            color: aqua;
            white-space: nowrap;
        }
        #danmu span{
            position: absolute;
            font-size: 16px;
            white-space: nowrap;
            right: -2px;
        }
        </style>
    
        
        <div>
            <div id="danmu"></div>
        </div>

js

function showDanmu(data){
              //随机高度添加元素
              var mes_top = ((Math.floor(Math.random()*10000)) % ($("#danmu").height()));
              $("#danmu").append('<span style="top:' + mes_top + 'px">' + data.name+": "+data.msg + '</span>');
        }
    
    
        var speeds = {};
        function Speed(){
            var msg_span = $("#danmu span");
            //不断移动存在的所有元素,出边界的移除
            for (var i=0;i<msg_span.length;i++) {
                var next_right_value = (parseInt(msg_span.eq(i).css('right')) + 1) + 'px';
                msg_span.eq(i).css('right',next_right_value);
                if(parseInt(next_right_value) > 2000){
                    msg_span.eq(i).remove();
                }
            }
        }
    
        setInterval(Speed,30);

转载于:https://my.oschina.net/lantianbaiyun/blog/1814392

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/d3e2f1c5cdc74702a5caa42ac144fa71.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Android弹幕实现：基于B站弹幕开源系统（1）

Android弹幕实现：基于B站弹幕开源系统（1）如今的视频播放，流行在视频上飘弹幕。这里面做的相对比较成熟、稳定、使用量较多的弹幕系统，当推B站的弹幕系统，B站的

我就是我/ 2023年10月17日 12:06/ 0 赞/ 37 阅读

相关实现简单的弹幕效果

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

爱被打了一巴掌/ 2022年12月13日 14:16/ 0 赞/ 130 阅读

相关简易弹幕实现

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

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

相关 Jquery实现弹幕效果

用jquery写了一个弹幕的小功能，供大家参考学习。前端显示 <span style="font-size:18px;"><div class="boxDo

秒速五厘米/ 2022年09月25日 07:29/ 0 赞/ 224 阅读

相关弹幕效果实现

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

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

相关 Netty+WebScoket实现实时弹幕

http协议:半双工 webSocket:全双工 ajax: 采取一个策略当连接非常多的时候可以直接丢弃当流量非常大的时候我们可以直接进行丢弃 \\ ne

素颜马尾好姑娘i/ 2022年05月29日 13:22/ 0 赞/ 228 阅读

相关 js实现之静态弹幕

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

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

相关 jquery实现页面弹幕效果

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

╰+哭是因爲堅強的太久メ/ 2022年05月19日 01:17/ 0 赞/ 350 阅读

相关 Canvas弹幕实现

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

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

相关 js如何实现弹幕效果

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

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