JS可循环弹幕示例

最新推荐文章于 2023-12-22 12:21:40 发布
最新推荐文章于 2023-12-22 12:21:40 发布
阅读量1.1k 收藏 5
点赞数 2
分类专栏： Web前端 JavaScript HTML/CSS 文章标签： js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingyuexiao/article/details/108571996
版权

朋友有项目需要做弹幕效果，在网上找了示例代码，然而运行起来有点问题（文字重叠+没有循环），就让我看下。由于本人比较不喜欢跟着别人思路走，因此干脆重新写了一个，基本实现弹幕功能，支持PC和移动端。具体功能如下：

  • 支持指定弹幕行数
  • 支持循环播放
  • 支持弹幕开关
  • 支持设置评论颜色（通过CSS支持，可改造成直接设置字体颜色）
  • 支持设置弹幕透明度

效果如下：

使用方法很简单：

<script src="js/barrage.js"></script>

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  qingyuexiao
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    5
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
JS前端千万级弹幕数据循环优化示例

				
			

			

				

					zl5186888的博客
				

				

					08-11
					
					322
					
				

			

		

		

			
				
本文涉及的知识点可能并不是很重要，在这里我要跟大家说的是，我们平时在写代码的时候，要善于发现代码的可优化空间，如果你发现了并且实事求是的去做了，你的能力就会有更大的提高，而且这个发现的过程你可以找同事，找leader去给你review代码，在业务中沉淀出来的代码比你自己平时写个小demo写的代码更能让你成长。我们这里不再使用slice的方案，设置一个游标，记录循环的初始位置，下次循环直接从游标记录的位置开始循环，然后满足查找的条件就break，这样既不破坏原来的数组，也能有效的减少循环的次数。...

			
		

	



                

              
                



	

		

			

				
					
弹幕的实现

				
			

			

				

					diaolanbeng0962的博客
				

				

					02-07
					
					1467
					
				

			

		

		

			
				
一、前言
　　今天浏览某网站看到一个活动页有内嵌的弹幕模块（图一），但是看到移动的弹幕重叠很多，不忍直视啊。突然想起很久之前自己写写过类似的弹幕，就翻出来看了一下，呵，也是不忍直视的，最后再附上当年的效果以及代码；


二、大话几点
1、弹幕应用场景，视频中，直播中，微信墙等；
2、弹幕增加了大家的互动性，不再是单纯的傻白甜的看着视频，还可以吐吐槽，增加趣味性，但对于密集恐...

			
		

	



                


  
              

                


	

		

			

				
					
前端实现循环弹幕效果

				
			

			

				

					weixin_42115495的博客
				

				

					09-28
					
					2907
					
				

			

		

		

			
				
微信h5要实现循环弹幕效果，直接上代码



<div class="danmu">
    <div class="my-inbox" ref='box' >
      <div class="danmudetal" v-for="item in danmu1" :style="'margin-right:' + item.speed + 'px'">
 ...

			
		

	





	

		

			

				
					
用JavaScript技术实现弹幕效果

				
			

			

				

					weixin_68405216的博客
				

				

					05-23
					
					479
					
				

			

		

		

			
				
margin: 0px;

    padding: 0px;

    width: 100%;

  ...

			
		

	



		

			
		



	

		

			

				
					
JS实现遍历弹幕数组和判断水王数

				
			

			

				

					xt2106119337的博客
				

				

					12-02
					
					202
					
				

			

		

		

			
				
JS实现遍历弹幕数组和判断水王数

			
		

	





	

		

			

				
					
两行弹幕动态轮播

				
			

			

				

					qq_22536729的博客
				

				

					10-27
					
					279
					
				

			

		

		

			
				
import React, { memo, useEffect, useState } from 'react';
import 'swiper/dist/css/swiper.min.css';

interface DanmuProps {
  danMuList: any[];
}

const DanMuFloatUp = memo((props: DanmuProps) => {
  const { danMuList } = props;
  const [currSlider, setC

			
		

	





	

		

			

				
					
Html5移动端弹幕动画实现示例代码

				
			

			

				

					09-22
				

			

		

		

			
				
在给定的例子中，`<div class="cute-barrage">` 是承载弹幕的容器，内部包含多个 `<div class="barrage-div">`，每个`barrage-div`代表一条独立的弹幕内容。每条弹幕由一个图片和一段文字组成，图片通过`<img>`标签...

			
		

	





	

		

			

				
					
CSS3 实现弹幕的示例代码

				
			

			

				

					09-24
				

			

		

		

			
				
 `moveArray`函数用来处理弹幕数组，将已显示的弹幕移动到数组末尾，模拟循环播放的效果。`checkDanmu`函数检查指定区域是否已有弹幕，避免重复插入。  4. **性能优化**：  示例代码中提到，使用`transform`和`...

			
		

	





	

		

			

				
					
js cavans实现静态滚动弹幕

				
			

			

				

					10-15
				

			

		

		

			
				
总结起来，本文档介绍的JavaScript和Canvas实现静态滚动弹幕的方法，提供了一种简单且可定制的方式来在网页上创建滚动字幕效果。它涉及到Canvas的基本使用，包括获取2D渲染上下文、绘制文本、更新位置等操作，以及...

			
		

	





	

		

			

				
					
Vue 实现简易多行滚动"弹幕"效果

				
			

			

				

					10-15
				

			

		

		

			
				
在本示例中，我们将探讨如何使用Vue来实现一个简易的多行滚动“弹幕”效果。弹幕效果常见于视频网站，用户可以发送文本或图片信息，这些信息会在屏幕中从一侧滚动到另一侧。  首先，我们看到模板部分包含两个主要的...

			
		

	





	

		

			

				
					
jQuery弹幕功能

				
			

			

				

					12-24
				

			

		

		

			
				
 { text: "这是一个jQuery弹幕示例！", time: 4 } ]; ```  在这个例子中，每个弹幕对象包含两个属性：`text`表示弹幕内容，`time`表示弹幕显示的秒数。  接下来，我们编写主要的jQuery函数来处理弹幕的滚动：  ```...

			
		

	





	

		

			

				
					
CSS——css+javascript轮播图/弹幕

				
			

			

				

					我是我
				

				

					06-22
					
					1195
					
				

			

		

		

			
				
1.transform方式实现轮播图
1.1 实现效果

1.2 实现原理

一个包含轮播内容的容器，超出容器部分隐藏
容器内多个子元素，flex布局
子元素在固定时间内移动固定距离

1.3 代码示例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt

			
		

	





	

		

			

				
					
uniapp小程序实现内容自适应并向上滚动弹幕

					
最新发布

				
			

			

				

					IThl4088的博客
				

				

					12-22
					
					986
					
				

			

		

		

			
				
uniapp小程序实现内容自适应并向上滚动弹幕

			
		

	





	

		

			

				
					
java outlook 中的excel 转成excel文件

				
			

			

				

					qq_15038189的博客
				

				

					09-15
					
					195
					
				

			

		

		

			
				
package com.cheng;

import com.github.liaochong.myexcel.core.HtmlToExcelFactory;
import org.apache.poi.ss.usermodel.Workbook;
import org.simplejavamail.outlookmessageparser.OutlookMessageParser;
import org.simplejavamail.outlookmessageparser.model.Outlook.

			
		

	





	

		

			

				
					
近乎完美的横向弹幕

				
			

			

				

					noal的博客
				

				

					03-10
					
					532
					
				

			

		

		

			
				
横向弹幕在工作中并不少见，每次写都挺头疼的，比如动画卡顿，弹幕长短不一导致重叠，速度不一致等问题，于是准备这次好好写一个，以后可以直接用，不需要每次重新开发，特此记录。

			
		

	





	

		

			

				
					
Excel导出带图片详解

				
			

			

				

					only one
				

				

					05-06
					
					1705
					
				

			

		

		

			
				
Excel导出带图片详解

一、引入的jar


        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>4.0.1</...

			
		

	





	

		

			

				
					
利用load_workbook将数据写入excel模板

				
			

			

				

					weixin_48365624的博客
				

				

					07-29
					
					3078
					
				

			

		

		

			
				
代码】利用load_workbook将数据写入excel模板。

			
		

	





	

		

			

				
					
水平无限循环弹幕的实现

				
			

			

				

					weixin_34125592的博客
				

				

					05-26
					
					2279
					
				

			

		

		

			
				
前言
在项目实践中应该有很多场景会用到弹幕，那么如何实现一个完美版本的弹幕呢？接下来我们原理加代码带你实现一个完整的弹幕组件(react版本)
无限循环的水平弹幕实现原理
针对实现原理，这里我画了一张原理图，大家可以看一下：

水平弹幕的实现有两种情况：
1、当弹幕的个数加起来的宽度不足以覆盖屏幕的可视化区域
2、当弹幕的个数加起来的宽度超过屏幕的可视化区域
针对以上两种情况我们有不同的展示效果，...

			
		

	





	

		

			

				
					
纯js 实现弹幕效果

					
热门推荐

				
			

			

				

					natural_live的博客
				

				

					08-02
					
					2万+
					
				

			

		

		

			
				
弹幕时近几年新兴的一种技术，接下来我要展示的就是怎么实现类似弹幕的效果。
先贴下效果图：




说是效果，要拿出去用肯定是不行的。
先说一下是怎么样的实现方法。弹幕肯定是出现在屏幕上，所以我们暂时把出现弹幕的窗口称为背景。
弹幕肯定尽量不能重叠在一起，所以我把整个弹幕出现的背景划分为几块，如下图：




1


2


3


4


5

			
		

	





	

		

			

				
					
使用js完成视频弹幕特效

				
			

			

				

					06-11
				

			

		

		

			
				
好的，以下是使用JavaScript实现视频弹幕特效的基本步骤：

1. 获取视频播放器的DOM元素和弹幕容器的DOM元素

2. 定义弹幕内容的数据结构，例如：

```
var comments = [
  { text: "第一条弹幕", time: 5 },
  { text: "第二条弹幕", time: 10 },
  { text: "第三条弹幕", time: 15 }
];
```

其中，text表示弹幕的文本内容，time表示弹幕出现的时间（单位为秒）。

3. 监听视频播放器的timeupdate事件，在每一帧视频播放时判断当前时间是否有对应的弹幕需要显示，如果有则创建一个弹幕元素，添加到弹幕容器中，并设置弹幕的样式和动画效果。

4. 为弹幕元素添加点击事件，当用户点击弹幕时可以进行相应的操作，例如暂停视频播放、跳转到对应的时间点等。

下面是一个简单的示例代码：

```javascript
var video = document.getElementById("myVideo");
var commentContainer = document.getElementById("commentContainer");

var comments = [
  { text: "第一条弹幕", time: 5 },
  { text: "第二条弹幕", time: 10 },
  { text: "第三条弹幕", time: 15 }
];

video.addEventListener("timeupdate", function() {
  var currentTime = video.currentTime;
  for (var i = 0; i < comments.length; i++) {
    if (currentTime >= comments[i].time) {
      var commentElement = document.createElement("div");
      commentElement.className = "comment";
      commentElement.textContent = comments[i].text;
      commentContainer.appendChild(commentElement);
      // 设置弹幕的样式和动画效果
      // ...
    }
  }
});

commentContainer.addEventListener("click", function(event) {
  // 处理弹幕点击事件
  // ...
});
```

需要注意的是，弹幕的样式和动画效果可以使用CSS来实现，例如：

```css
.comment {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
  white-space: nowrap;
  animation: move 10s linear;
}

@keyframes move {
  0% {
    transform: translate(100%, -50%);
  }
  100% {
    transform: translate(-100%, -50%);
  }
}
```

这里使用了position属性来设置弹幕的位置，animation属性来设置弹幕的动画效果。具体的样式和动画效果可以根据需要进行调整。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值