弹幕效果代码,JS代码库,德仔网

代码语言

代码分类

【JS】弹幕效果

作者:别寒 / 发布于2015/1/12/ 418


	<!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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　弹幕　

同语言下

可能有用的

别寒贡献的其它代码(1)

.弹幕效果