弹幕小效果
<style type="text/css">
*{ margin: 0; padding: 0;}
#box{ 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{ 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; 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>
</body>
</html>
<script src="sport1.js"></script>
<script src="public.js"></script>
<script type="text/javascript">
$id("sendCon").onclick = function(){
var oSpan =document.createElement("span");
oSpan.innerHTML = $id("text").value;
$id("content").appendChild( oSpan );
oSpan.style.top = rand(0,270) + "px";
var w = oSpan.offsetWidth;
moves( oSpan , { "left" : -w } ,function(){
oSpan.remove();
});
}
$id("hideCon").onclick = function(){
$id("content").style.opacity = 0;
}
$id("showCon").onclick = function(){
$id("content").style.opacity = 1;
}
</script>
sport1.js
function getStyle(el,attr){
if(window.getComputedStyle){
return window.getComputedStyle(el,null)[attr];
}else{
return el.currentStyle[attr];
}
}
function move(el,target,attr,callback){
clearInterval(el.timer);
el.timer=setInterval(function(){
var cur=0;
if(attr=="opacity"){
cur=parseFloat(getStyle(el,attr))*100;
}else{
cur=parseInt(getStyle(el,attr));
}
var speed=(target-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur == target){
clearInterval(el.timer);
if(callback){
callback();
}
return;
}
if(attr=="opacity"){
el.style[attr]=(cur+speed)/100;
}else{
el.style[attr]=cur+speed+"px";
}
},30)
}
function moves(obj,json,callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag=true;
for(var attr in json){
var cur = 0;
if(attr == "opacity"){
cur = parseFloat(getStyle(obj,attr)) * 100;
}else{
cur = parseInt(getStyle(obj,attr));//有单位 所以parseInt
}
var speed = (json[attr] - cur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(cur != json[attr]){
flag=false;
}
if(attr == "opacity"){
obj.style[attr] = (cur + speed) / 100;
}else{
obj.style[attr] = cur + speed + "px";
}
}
if(flag){
clearInterval(obj.timer);
if(callback){
callback();
}
}
},100)
}
function movies (el,json,callback) {
clearInterval(el.timer);
el.timer=setInterval(function(){
var flag=true;
for (attr in json) {
var cur=0;
if(attr=="opacity"){
cur=parseFloat( getStyle(el,attr))*100;
}else{
cur=parseInt(getStyle(el,attr));
}
var speed=(json[attr]-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr]){
flag=false;
}
if(attr=="opacity"){
el.style[attr]=(cur+speed)/100;
}else{
el.style[attr]=cur+speed+"px"
}
}
if(flag){
clearInterval(el.timer);
if(callback){
callback();
}
}
},60)
}
public.js
function $id(id){ return document.getElementById(id); } function rand(min,max){ return Math.round(Math.random()*(max-min)+min); } function getColor(){ var str="0123456789ABCDEF"; var color="#" for(var i=0;i<6;i++){ color+=str[rand(0,15)] } return color; } function diff(start,end){ return Math.abs(start.getTime()-end.getTime())/1000; } function mySort(arr){ for(var i=0;i<arr.length-1;i++){ for (var j=0;j<arr.length-1-i;j++){ if(arr[j]>arr[j+1]){ var temp=arr[j]; arr[j]=arr[j+1]; arr[j+1]=temp; } } } return arr; } function zero(val){ return val<10?"0"+val:""+val; } function addEvent(obj,type,fun){ if(obj.addEventListener){ obj.addEventListener(type,fun,false); }else{ obj.attachEvent("on"+type,fun); } } function removeEvent(obj,type,fun){ if(obj.removeEventListener){ obj.removeEventListener(type,fun,false); }else{ obj.detachEvent("on"+type,fun); } }
