文档章节

javascript实现弹幕

别寒
 别寒
发布于 2015/01/08 15:02
字数 174
阅读 95
收藏 0
<!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:100%;
			height:100%;
			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>


© 著作权归作者所有

别寒
粉丝 30
博文 272
码字总数 138741
作品 0
永州
程序员
私信 提问
FlowPlayer 播放器加上弹幕功能,通过 AJAX 保存弹幕至 XML

[背景] flowplayer加上弹幕功能(可以git上找到源码,在官网有二进制包)(https://github.com/flowplayer/flash)(不用FLOWPLAYER也行,但是要支持FLV和M3U8(最好还有直播流)) [需求] as或者...

晓远夜子家蹲
2016/02/14
22
10
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

之前在一个移动端的抽奖页面中,在抽奖结果的展示窗口需要弹幕轮播显示,之前踩过一些小坑,现在总结一下前端弹幕效果的实现方式。 css3实现乞丐版的弹幕 css3弹幕性能优化 canvas实现弹幕 ...

yuxiaoliang
2018/07/11
0
0
java+html实现弹幕功能并集成敏感词过滤功能,实现思路

即时评论和即时弹幕功能架构设计: 后端数据存储 前端弹幕展示方式 前后台即时通讯方式 敏感词过滤系统 数据存储 弹幕数据庞大,一般是无用数据,存储的话纯文本就行,结构化要求不强,数据不...

两毛五哥哥
2017/11/16
0
0
直播平台弹幕助手/抓包/开源代码修改

技术关键词: https node.js socket.io javascript 项目总览:监控并抓取陌陌直播平台所有在线房间的弹幕/礼物/发言信息并存入数据库。 本众包需求: 整个项目最难的一步:找到弹幕服务器的连...

Markery_Move
2016/06/28
14
0
【BUG】【微信端】【开发环境1.4.0】bug清单,需开发确认

以下问题均为iPhone5c/iOS9.3.1机器上出复现: 横屏之后,ppt底部被弹幕输入框遮挡,弹幕输入框无法隐藏 横屏之后,发送弹幕,弹幕从屏幕中线右侧出现 横屏之后切换到竖屏,发送弹幕,弹幕没...

Joiningss
2016/06/08
3
6

没有更多内容

加载失败,请刷新页面

加载更多

4.01、Linux异常

1、无法连接虚拟设备ide1:0,因为主机上没有响应的设备 解决方法:找到“虚拟机” —— 打开“虚拟机设置” —— 单击“CD/DVD(IDE)”,右侧选中“使用ISO映像文件”,然后选中自己的镜像,重启...

静以修身2025
36分钟前
1
0
不允许有匹配 "[xX][mM][lL]" 的处理指令目标

Bug解决方案:org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 8; 不允许有匹配 "[xX][mM][lL]" 的处理指令目标 Caused by: org.xml.sax.SAXParseException; lineNumber: 1; c......

我叫小糖主
40分钟前
1
0
Mysql InnoDB 行锁和表锁介绍

mysql 的 InnoDB引擎支持行锁,与Oracle不同,mysql的行锁是通过索引加载的,即是行锁是加在索引响应的行上的,要是对应的SQL语句没有走索引,则会全表扫描,行锁则无法实现,取而代之的是表...

嘴角轻扬30
40分钟前
2
0
springboot+jpa 错误信息org.springframework.beans.factory.BeanCreationException

报错信息 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'entityManagerFactory' defined in class path resource [org/springframework/boot/a......

冥焱
58分钟前
1
0
威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名。 Xulu并不是第一个攻击...

迷你芊宝宝
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部