简单的弹幕效果
2016-11-23 本文已影响0人
Lamport
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 弹幕-JavaScript </title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#barrage {
width: 750px;
height: 500px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#cover{
width: 100%;
height: 350px;
position: relative;
}
#cover span{
position: absolute;
left: 750px;
color: red;
white-space: nowrap;
display: block;
}
p{
position: absolute;
left: 30%;
bottom: 10px;
display: none;
}
</style>
</head>
<body>
<div id="barrage">
<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="toggle" id="toggle" value="隐藏弹幕" />
</p>
</div>
<script type="text/javascript">
var oBarrage = document.getElementById("barrage");
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");
var t = 0;
var cH = oCover.offsetHeight;
oToggle.onOff = true;
oBarrage.onmouseover = function(){
oP.style.display = 'block';
};
oBarrage.onmouseout = function(){
oP.style.display = 'none';
};
// console.log( oCover.offsetLeft );
oBtn.onclick = function(){
var val = oText.value;
if( val ){
var span = document.createElement('span');
span.innerHTML = val;
oCover.appendChild( span );
};
oText.value = '';
span.style.top = t + 'px';
t += 20;
if( t > cH-20 ){
t = 5;
};
var l = span.offsetLeft;
var sW = span.offsetWidth;
var timer = setInterval(function(){
l --;
if( l < -sW ){
clearInterval(timer);
oCover.removeChild( span );
};
span.style.left = l + 'px';
},runRandom());
};
oToggle.onclick = function(){
if(oToggle.onOff){
oToggle.value = '显示弹幕';
oCover.style.display = 'none';
}else{
oToggle.value = '隐藏弹幕';
oCover.style.display = 'block';
};
oToggle.onOff = !oToggle.onOff;
};
function runRandom(){
return Math.random()*14 + 14;
}
</script>
</body>
</html>
