弹幕效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#box{ width: 542px; height: 330px;
border: 3px solid goldenrod;
margin-left:300px;}
#btm{margin: 0;padding: 0; height: 30px;background: goldenrod;
display: flex; z-index: 999; position: relative; }
#btm span{ flex: 1; flex-direction: column;font: 16px/30px "微软雅黑";
color: #fff; text-align: center; cursor: pointer;}
#btm span:nth-child(1){ flex: 3;}
#btm span input{ width:100% ; height: 30px; font: 16px/30px "微软雅黑";
border: none; outline: none;}
#content{ height: 300px; position: relative; z-index: 999;
background:rgba(0,0,0,0.7)}
#content span{color:#fff; height: 30px; font: 14px/30px "微软雅黑"; position: absolute;left:542px;
white-space: nowrap;}
#v{ position: absolute;
left: 303px; top: -32px; width: 542px; height: 358px; background: url(2.png);}
</style>
</head>
<body>
<div id="box">
<div id="content"></div>
<p id="btm">
<span><input type="text" id="text" /></span>
<span id="sendCon">发送</span>
<span id="hideCon">隐藏</span>
<span id="showCon">显示</span>
</p>
</div>
<div id="v">
</div>
<script src="sport.js"></script>
<script>
var sendCon = document.getElementById("sendCon");
var text = document.getElementById("text");
var content = document.getElementById("content");
sendCon.onclick = function() {
var val = text.value;
var oSpan = document.createElement("span");
oSpan.innerHTML = val;
var num = parseInt(Math.random()*271);
oSpan.style.top = num + "px";
content.appendChild(oSpan);
var target = -oSpan.offsetWidth;
startMove(oSpan,{left: target}, function() {
oSpan.remove();
})
}
</script>
</body>
</html>
sport.js
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var current = 0;
if(attr == "opacity"){
current = parseFloat( getStyle( obj,attr ) ) * 100;
}else if( attr == "zIndex" ){
current = parseInt( getStyle(obj,attr) );
}else{
current = parseInt( getStyle(obj,attr) );
}
var speed = (json[attr] - current) > 0 ? 1 : -1;
if( json[attr] != current ){
flag = false;
}
if(attr == "opacity"){
obj.style.opacity = (current + speed) / 100;
}else if(attr == "zIndex"){
obj.style.zIndex = json[attr] ;
}else{
obj.style[attr] = current + speed + "px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},10)
}
function getStyle(obj,attr){
return window.getComputedStyle ? window.getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}