简单的实现弹幕功能

最新推荐文章于 2024-07-01 07:58:21 发布
最新推荐文章于 2024-07-01 07:58:21 发布
阅读量4.9k 收藏 7
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44484520/article/details/88929017
版权 
开发工具与关键技术：Visual Studio 2015  JavaScript
作者：宁佐潮
撰写时间：2019.3.31

在日常追剧中的，许多人都喜欢打开弹幕，因为评论往往才具有灵魂，接下来让我们一起制作一个简单弹幕功能
页面而已和样式十分简洁，不多说，直接上图片
在这里插入图片描述
在这里插入图片描述
主要部分，input用来输入文字，span标签当作按钮来点击发送弹幕，动画danmuon用来实现弹幕从左至右的滑动
然后便是点击发送弹幕触发的事件
在这里插入图片描述
获取到ID，click里一个function，dangmuval是获取到的文字，i是随机的高度，然后cont是将动态添加的弹幕，设置style样式的高度为上面的随机高度，，再加上从左至右的动画效果，内容便是上面获取到用户输入的内容，最后再用append来添加到ul标签的尾部部分，这样便可以实现弹幕的功能了


<body>
    <style>
        li {list-style: none; }
        #dang { height: 40px;text-align: center;padding-top: 650px; }
        #dang input { width: 200px;height: 30px; text-align: left;line-height: 30px;padding-left: 5px; }
        #fan {width: 80px;height: 35px;text-align: center;line-height: 35px;color: #000;display: inline-block;cursor: pointer;}
        .shanpe li { position: absolute;color: #000; height: 30px;line-height: 30px; right: 0px;}
        @keyframes danmuone {
            100% {
                right: 1600px;
            }
        }
    </style>
    <div class="content" id="content">
        <ul class="shanpe" id="shanpe"></ul>
        <form action="/" method="post" id="dang">
            <input type="text" name="name" value="¥ㄟ(´･ᴗ･`)ノ$暴富" id="dangmu" />
            <span id="fan">发送弹幕</span>
        </form>
    </div>
    <script src="jquery-1.12.4/jquery-1.12.4.js"></script>
    <script>
        $("#fan").click(function () {
            var dangmuval = $("#dangmu").val();
            var i = Math.floor(Math.random() * 300);//随机高度
            var cont = '<li style="' + 'top: ' + i + 'px;' + 'animation: danmuone 10s 1 forwards linear;' + '">' + dangmuval + '</li>';
            $("#shanpe").append(cont);
        });
    </script>
</body>
十安喜欢猫
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android弹幕的滚动的实现_弹幕实现原理
weixin_28936649的博客
12-26 1312
直播是眼下最为火爆的行业，而弹幕无疑是直播平台中最流行、最重要的功能之一。本文将讲述如何实现兼容 PC 浏览器和移动浏览器的弹幕。基本功能并发与队列一般来说，弹幕数据会通过异步请求或 socket 消息传到前端，这里会存在一个隐患——数据量可能非常大。如果一收到弹幕数据就马上渲染出来，在量大的时候：显示区域不足以放置这么多的弹幕，弹幕会堆叠在一起；渲染过程会占用大量 CPU 资源，导致页...
JavaScript 简单的弹幕功能的实现
JiangLittleBai的博客
05-17 493
实现一个简单的弹幕效果，时间充裕的话会逐步完善优化弹幕效果
弹幕功能的实现
literarygirl的博客
11-11 2518
弹幕功能的实现 在做项目的时候用到了弹幕功能 弹幕的字体大小和颜色也都是随机的，代码奉上 html: <div class="clearfix tool-switch-container" id="btn-barrage"> <input id="switch" type="checkbox" class="switch" /> ...
vue3中使用弹幕组件vue-danmaku
最新发布
qq_42931285的博客
07-01 585
vue3中使用弹幕组件vue-danmaku
js实现弹幕功能
qq_40072782的博客
10-05 3822
要点： 布局：输入框、提交按钮、弹幕区域 创建弹幕，并获取到它的相关属性，如颜色。。。。 弹幕的颜色随机 高度随机 距离左边边框距离，实时变化 （难点） 弹幕文字不换行 （white-space：nowrap） 我能想到的 大概就这么多吧。附上完整代码，代码注释解释得差不多了， &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &l...
实现APP弹幕功能——Android
luycc的博客
04-20 3827
首先我觉得这边文章写的很详细，并且每一个步骤都有注释，代码功底比较差的我也建议进来看看。 送给大家一句话：志不强者智不达，言不信者行不果。——墨翟 首先我们要整理一下思绪我们大概需要实现哪个细节板块呢。 我们最直观的看来，弹幕就是从右往左出现到消失。我们要实现这个动画，弹幕的大小，颜色，出现方式，加速，弹幕的不重叠（这个我想了好久还没有实现，有
IOS 实现简单的弹幕功能
09-01
在iOS开发中，实现弹幕功能是一项常见的需求，特别是在视频播放或者直播应用中。本文将详细介绍如何使用Swift语言在iOS平台上实现一个简单的弹幕系统。弹幕系统的主要目的是在屏幕上以特定的速度和顺序滚动显示文本...
Android项目中实现弹幕功能
12-12
这个“Android项目中实现弹幕功能”的Demo涵盖了多个关键知识点，让我们逐一深入探讨。 首先，**视频播放**是弹幕功能的基础。在Android中，我们通常会使用`MediaPlayer`类来播放视频，或者更高级的`ExoPlayer`库，...
html5使用canvas实现弹幕功能示例
09-27
在这个例子中，我们利用Canvas来实现弹幕功能，这在弹幕视频网站中非常常见，用户可以在观看视频的同时发送文字消息，这些消息就像子弹一样快速滑过屏幕。 首先，我们要在HTML中设置一个Canvas元素，并覆盖在视频...
jQuery实现弹幕效果
10-20
总结：本文通过jQuery实现了一个简单的弹幕效果，涉及到了HTML结构定义、CSS样式布局、JavaScript事件处理和动画实现等关键知识点。通过理解和应用这些知识点，可以为网站或应用程序添加类似的实时反馈功能，增强...
Android简单实现弹幕效果
08-25
在Android开发中，实现弹幕效果通常用于视频播放应用，为用户提供类似直播中的互动体验。在本案例中，我们将探讨如何在Android应用中简单实现这一功能。首先，我们需要理解弹幕效果的基本架构。 1. **布局设计**： ...
简易弹幕效果实现
08-14
简易弹幕效果实现，对应博文：http://blog.csdn.net/books1958/article/details/46375591
HTML5实现视频弹幕功能
12-30
1.首先展示一下弹幕视频弹幕原图，事实说话 2.代码展示 1>html代码展示   <div class=barrage> <video id=myvideo autoplay loop width=100% height=300px> <source src=video/1.mp4> </video> <div class=screen> <div class=content> <!--内容在这里显示--> <
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
09-22
主要介绍了前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
弹幕实现方式
03-26
实现最基本的弹幕 脚手架~~使用的是springboot， maven编译
java桌面弹幕代码
01-27
java实现桌面弹幕，原理很简单，只有一个类就不发工程了。使用时要往你的工程导入rt.jar包。这个包不需要下载，在你的jdk/ lib目录下就有。直接copy到你的工程导入就行。
Java 实现视频弹幕功能
独行侠梦的博客
11-16 4091
2021年了，还有不支持弹幕的视频网站吗，现在各种弹幕玩法层出不穷，抽奖，ppt都上弹幕玩法了，不整个弹幕都说不过去了，今天笔者就抽空做了一个实时视频弹幕交互功能的实现，不得不说这样的形式...
Android弹幕功能实现，模仿斗鱼直播的弹幕效果(1)，系统学Android从零开始
2401_84149339的博客
04-07 811
OK，现在可以运行一下项目了，程序启动之后就会自动开始播放视频，效果如下图所示：这样我们就把第一步的功能实现了。
3种方法实现弹幕效果
行云出岫
11-09 4113
本文实现弹幕效果的三种方法：1、Canvas实现 2、Jquery实现 3、js原生实现 1、Canvas弹幕实现 借鉴于：https://segmentfault.com/a/1190000011723466 代码如下： //index.html文件 <!DOCTYPE html> <html lang="en"> <head> <me...
Websocket实现视频弹幕功能
03-31
WebSocket技术可以用来实现实时弹幕功能。以下是一个简单的WebSocket弹幕示例： 1. 前端代码 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Websocket弹幕</title> <style> #barrage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .barrage-item { position: absolute; top: 0; white-space: nowrap; font-size: 20px; color: white; text-shadow: 1px 1px 2px black; } </style> </head> <body> <canvas id="barrage"></canvas> <script> const canvas = document.getElementById('barrage'); const ctx = canvas.getContext('2d'); const width = canvas.width = window.innerWidth; const height = canvas.height = window.innerHeight; let barrageList = []; // 连接websocket服务器 const ws = new WebSocket('ws://localhost:8080'); ws.onmessage = (event) => { const data = JSON.parse(event.data); barrageList.push({ text: data.text, x: width, y: Math.random() * height, color: data.color }); }; function draw() { ctx.clearRect(0, 0, width, height); for (let i = 0; i < barrageList.length; i++) { const item = barrageList[i]; ctx.fillStyle = item.color; ctx.fillText(item.text, item.x, item.y); item.x -= 3; } barrageList = barrageList.filter(item => item.x > -ctx.measureText(item.text).width); requestAnimationFrame(draw); } draw(); </script> </body> </html> ``` 2. 后端代码 ```javascript const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { console.log('connected'); ws.on('message', (message) => { console.log(`received: ${message}`); wss.clients.forEach(client => { if (client.readyState === WebSocket.OPEN) { client.send(message); } }); }); }); ``` 3. 使用方法 用户在前端页面上输入文本和颜色，点击发送按钮后，将文本和颜色发送给后端WebSocket服务器，服务器接收到消息后将消息广播给所有连接的客户端，客户端接收到消息后将消息添加到弹幕列表中，并在画布上绘制弹幕。 这是一个最基本的弹幕实现，实际中还需要考虑弹幕的速度、字体大小、弹幕屏蔽等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值