弹幕效果

Posted 2020-11-22 xiaoyaolang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹幕效果相关的知识，希望对你有一定的参考价值。

弹幕小效果

	<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>
</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)
}

View Code

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);
    }
}

View Code

技术图片

以上是关于弹幕效果的主要内容，如果未能解决你的问题，请参考以下文章