<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#screen{
600px;
height: 400px;
border: 1px solid #999;
background: url(img/big1.jpg)no-repeat left;
margin: 100px auto;
position: relative;
}
#cover{
100%;
height: 300px;
position: relative;
overflow: hidden;
}
#cover span{
color: red;
position: absolute;
left: 600px;
display: block;
white-space: nowrap;
}
#p{
position: absolute;
bottom: 10px;
display: none;
}
</style>
</head>
<body>
<div id="screen">
<div id="cover">
</div>
<p id="p">
<input type="text" name="text" id="text" placeholder="请输入要发送的内容..." />
<input type="button" name="btn" id="btn" value="发送" />
<input type="button" name="" id="toggle" value="隐藏弹幕" />
</p>
</div>
<script type="text/javascript">
var oScreen = document.getElementById("screen");
var oCover = document.getElementById("cover");
var oP = document.getElementById("p");
var oText = document.getElementById("text");
var oBtn = document.getElementById("btn");
var oToggle = document.getElementById("toggle");
oScreen.onmouseover = function(){
oP.style.display = 'block';
}
oScreen.onmouseout = function(){
oP.style.display = 'none';
}
oBtn.onclick = function(){
var val = oText.value;
if(val){
var ospan = document.createElement('span');
ospan.innerHTML = val;
oCover.appendChild(ospan)
}
oText.value = '';
ospan.style.top = topRandom() + 'px';
var l = ospan.offsetLeft;
var sW = ospan.offsetWidth;
var timer = setInterval(function(){
l--;
if(l<-sW){
clearInterval(timer);
oCover.removeChild(ospan)
}
ospan.style.left = l+ 'px';
},runRandom())
}
oToggle.onoff = true;
oToggle.onclick = function(){
if(oToggle.onoff){
oToggle.value = '显示弹幕';
oCover.style.display = 'none';
}else{
oToggle.value = '隐藏弹幕';
oCover.style.display = 'block';
}
oToggle.onoff = !oToggle.onoff;
}
function topRandom(){
return Math.random()*200 ;
}
function runRandom(){
return Math.random()*14 + 14;
}
</script>
</body>
</html>