JS--实现弹幕效果

最新推荐文章于 2023-12-03 19:24:47 发布
最新推荐文章于 2023-12-03 19:24:47 发布
阅读量6.2k 收藏
点赞数
分类专栏： js 文章标签： js 弹幕
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
  < head >
   < title >javascript弹幕</ title >
   < meta  http-equiv = "Content-Type"  content = "text/html; charset=gb2312"  />
 
     < style >
         #play{
             width:600px;
             height:500px;
             background-color:#000;
         }
         
         #tangmu{
             width:600px;
             height:500px;
             background-color:#fff;
             z-index:9999;
             background-color: rgba(000, 1, 000, 0.1);
         }
         
         #textStyle{
             position:absolute;
             font-size:24px;
             color:#fff;
         }
     </ style >
     
  </ head >
 
  < body >
     < div  id = "play" >
         < div  id = "tangmu" >
             
         </ div >
     </ div >
     
     < input  type = "text"  id = "text"  value = "这是弹幕..." />< input  type = "button"  value = "发送"  onClick = "tangmu();" />
     
     < script >
         var si;
         function tangmu(){
             clearInterval(si);
             var text = document.getElementById("text");
             var tangmu = document.getElementById("tangmu");
 
             var textStyle="< font  id = "textStyle" >"+text.value+"</ font >";
             
             mathHeight = Math.round(Math.random()*tangmu.offsetHeight)+"px";
 
             var textLeft=tangmu.offsetWidth+"px";
             
             tangmu.innerHTML=textStyle;
             
             var textStyleObj = document.getElementById("textStyle");
             
             textStyleObj.style.left=textLeft;
             textStyleObj.style.top=mathHeight;
             
             var x=parseInt(textStyleObj.style.left);
             
             si = setInterval("xunhuan("+x+")",100);
             
         }
         function xunhuan(left){
             var textStyleObj = document.getElementById("textStyle");
             textStyleObj.style.left=left;
             
             var x=parseInt(textStyleObj.style.left);
 
             if(x< textStyleObj.style.width ){
                 document.getElementById("tangmu") .innerHTML = "" ;
                 clearInterval(si);
             }else{
                 x- = 18 ;
             }
             
             textStyleObj.style.left =x+"px";
         }
     </script>
     
  </ body >
</ html >
Virtuoso_人间五十年
关注
专栏目录
JavaScript-实现横向文字弹幕功能
m0_53206841的博客
11-28 970
实现文字的跑马灯/弹幕效果，主要思路为： js中： 定义一个数组存放文字信息，定义一个数组存放跑马灯播放信息，定义一个将文字信息添加至播放信息的方法，当页面加载时，执行该方法， 如果存放文字信息的数组为空时，返回； 如果播放信息的数组大于一定的数量且正在播放的信息为文字信息的最后一个，将播放信息数组赋值为空，即重置播放数组； 如果文字信息不为空，通过遍历将文字信息添加至播放信息中，并添加高度属性（奇数显示在第二行，偶数显示在第一行，该属性在html结构中可用于设置动态高度），并设置添加的间隔时间；
纯原生JS 实现的多彩视频弹幕效果。可实现删除 关闭打开弹幕
05-21
以下是实现弹幕效果的关键知识点： 1. **原生JavaScript**：不依赖任何库或框架，直接使用JavaScript的基本语法和API，如变量声明、函数、事件处理等，能提高代码执行效率并降低依赖性。 2. **DOM操作**：利用`...
js弹幕插件
11-23
这是一个js写的弹幕插件，有demo可参考 。有提供的一些方法看demo就可以运用到项目中
js 弹幕
yjnlovepy的博客
01-18 541
js弹幕
JavaScript 实现滚动弹幕
O_osange的博客
01-18 1428
JavaScript 实现滚动弹幕
JavaScript实现弹幕功能
m0_51354601的博客
04-28 1891
【代码】JavaScript实现弹幕功能。
js实现弹幕效果
最新发布
2301_81302603的博客
12-03 312
js实现弹幕效果
rc-danmaku:React弹幕组件
05-23
:rocket: React 弹幕组件 - 基于 React 17 和 TypeScript4 开发 自用开发，若发现问题欢迎提 issue，有功能需求欢迎提 pr 或者在 issue 中反馈。 建议 package.json 中版本号锁定为安装时版本（因为目前为止还是自用...
jQuery实现弹幕效果
10-20
本文将详细介绍如何使用jQuery来实现一个基本的弹幕效果。弹幕效果通常用于在线视频平台或论坛中，允许用户实时输入信息并以动画形式在屏幕上滚动显示，从而增加互动性和趣味性。 知识点一：jQuery基础 jQuery是一...
jquery.barrager.js-专业的网页弹幕插件
12-11
3. **易于集成**：由于基于jQuery，该插件可以很容易地融入现有的jQuery项目中，无论是在论坛、博客还是其他类型的网站，只需要引入相关的JavaScript文件并进行简单的配置即可实现弹幕功能。 4. **优化性能**：考虑...
js特效弹幕
08-24
仿京东七夕弹幕 HTML+CSS+jQuery实现弹幕技术
JS实现直播网站弹幕
10-31
纯JS实现的弹幕效果，类似直播网站弹幕，支持输入实时显示。
JS弹幕实现
weixin_33958366的博客
10-23 245
基于直播平台的流行，利用原生实现一下弹幕效果。 原文链接 实现原理 1、设置展示弹幕元素位置属性为relative2、动态创建弹幕元素，位置属性设置absolute，left为展示宽度3、随机设置弹幕元素top值4、随机产生弹幕元素移动速率，修改left值 随机颜色 第一种实现 let color = '#' + Math.floor(M...
纯js 实现弹幕效果
热门推荐
natural_live的博客
08-02 2万+
弹幕时近几年新兴的一种技术，接下来我要展示的就是怎么实现类似弹幕的效果。 先贴下效果图： 说是效果，要拿出去用肯定是不行的。 先说一下是怎么样的实现方法。弹幕肯定是出现在屏幕上，所以我们暂时把出现弹幕的窗口称为背景。 弹幕肯定尽量不能重叠在一起，所以我把整个弹幕出现的背景划分为几块，如下图： 1 2 3 4 5
js 几种弹幕
qq_40895460的博客
02-22 417
这里的代码可以直接复制过去使用 第一种 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>鍘熺敓JS瀹炵幇寮瑰箷鏁堟灉</title> <style> #wrapper { height: 400px; ...
Javascript实现的一个简单的弹幕效果-入门版
Luckytao09的博客
09-12 2384
思路如下: 依据web的三层架构搭建好页面 处理页面逻辑 一.基本结构的搭建 我需要的样式如上图:所以我的基本结构也就明确下来了 1.html结构骨架<div class="boxDom" id="boxDom"> <div class="idDom" id="idDom"> <div class="content"> <p class="
原生JS实现弹幕效果
qq_42616564的博客
06-10 1937
原文：https://www.cnblogs.com/wenruo/p/9566612.html
用JS+CSS打造你自己的弹幕王国，让网页动起来！
weixin_62650212的博客
03-21 4967
😎用JS+CSS打造你自己的弹幕王国，让网页动起来！弹幕大法，让你的网页像视频一样有趣！如何用JS+CSS实现弹幕效果？看完这篇博客，你就会了！JS+CSS + 弹幕 = 网页新体验！教你如何用简单的代码实现弹幕功能！你还不会用JS+CSS做弹幕？快来学习这个超酷的网页技巧吧！你想用js和css实现弹幕效果吗？弹幕效果是指在视频或图片上显示滚动的文字或图形，通常用于表达观众的评论或反馈。这就是使用JS+CSS方法实现弹幕效果的简单示例网页。
JavaScript简单的弹幕
Laky1943的博客
08-26 208
弹幕 首先是弹幕的位置，是要从最右滑到最左，为了防止随机高度弹幕会覆盖的问题，设置了通道。 每一个通道是从左到右的一条，高度固定，这样不同通道的弹幕不会相互覆盖。 弹幕滑动就是简单设置CSS属性transition实现。开始使用left改变弹幕的位置，后来改为transform，性能确实提高很多。 设置10条弹幕通道，每个通道有一个DOM池，...
JQuery实战：直播视频弹幕效果实现教程
本文档主要介绍了如何使用jQuery库实现直播视频弹幕效果。jQuery是一种流行的JavaScript库，它简化了DOM操作和事件处理，对于前端开发人员来说非常实用。在本文中，作者提供了一个基础的HTML结构和CSS样式，以及一段...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值