弹幕源码

来源：互联网发布：中华姓氏家谱软件编辑：程序博客网时间：2024/04/30 07:15

<!DOCTYPE html>
<html>
<head>
<title>javascript弹幕</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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); */
background-color: blue;
}

#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="aa" />
<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>

阅读全文

0 0