技术教程 弹幕效果 正文

弹幕效果

2022-10-13,

弹幕小效果

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

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

 

《弹幕效果.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!