html中实现类似于弹幕的效果代码,javascript实现弹幕效果

javascript弹幕

#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;

}

var si;

function tangmu(){

clearInterval(si);

var text = document.getElementById("text");

var tangmu = document.getElementById("tangmu");

var textStyle=""+text.value+"";

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

document.getElementById("tangmu").innerHTML="";

clearInterval(si);

}else{

x-=18;

}

textStyleObj.style.left=x+"px";

}