【特效】js打造黑客帝国文字特效

最新推荐文章于 2024-03-18 16:40:59 发布

lovqc

最新推荐文章于 2024-03-18 16:40:59 发布

阅读量1.6k

点赞数

分类专栏： web前端之路文章标签： javascript web前端开发黑客帝国特效

本文链接：https://blog.csdn.net/lovqc/article/details/50326931

版权

web前端之路专栏收录该内容

31 篇文章 0 订阅

订阅专栏

不多说，直接贴代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>document</title>
	<style type="text/css">
		body{
			background: #111;
		}
		#cont{
			background: #000;
			width: 600px;
			height: 800px;
			margin: 20px auto;
			position: relative;
		}
		.divbox{ 
			position: absolute;
			top:0px;
			width: 6px;
		}
		.snows{  
			display: block;
		}

	</style>
	
</head>
<body> 
	<div id="cont"> 
	</div>
	<button id="btn">停止</button>
	<button id="start">开始</button>
	<script type="text/javascript">
		// 获取元素
		var $snows = document.getElementsByTagName('span');
		var $cont = document.getElementById('cont') 
		var $btn = document.getElementById('btn') 
		var $start = document.getElementById('start') 
		var _top,
			_left, 
		 	cont=66,
		 	timer,
		 	r,
		 	g,
		 	b,
		 	speed=60;
		 	 
		
		//创建span 
		var $creatSnows = null;
		var $creatDivs = null; 
		 
		document.body.οnlοad=function(){
			
			
			move();
			// alert($creatDivs) 
			$btn.οnclick=function() {
				/* Act on the event */
				clearInterval(timer)
				// alert()
			};
			$start.οnclick=function() {
				/* Act on the event */
				clearInterval(timer)
				timer = setInterval(function(){
					var divBoxList =document.getElementsByName('singlebox'); 
					// alert(divBoxList.length);
					var color = borthColor(); 
				 	for (var j = 0; j < divBoxList.length; j++) {  
						
					 	if (divBoxList[j].offsetTop >= 500){
					 		// clearInterval(timer);  
					 		divBoxList[j].style.top=Math.floor(Math.random()*500)+'px';
					 		divBoxList[j].style.left=Math.floor(Math.random()*600)+'px'; 
					 	}else{ 
					 	 	divBoxList[j].style.color='#'+color.r+color.g+color.b; 
					 		divBoxList[j].style.top = divBoxList[j].offsetTop+speed+'px';  
					 		console.log(divBoxList.length); 

					 	}; 


				 	};
					 
				},100);
				// alert()
			};
		};
		 
		

		// // 移动函数
		function move(){

			
			appendDivList();
				// alert('hello')
			timer = setInterval(function(){
				var divBoxList =document.getElementsByName('singlebox'); 
				// alert(divBoxList.length);
				var color = borthColor(); 
			 	for (var j = 0; j < divBoxList.length; j++) {  
					
				 	if (divBoxList[j].offsetTop >= 500){
				 		// clearInterval(timer);  
				 		divBoxList[j].style.top=Math.floor(Math.random()*500)+'px';
				 		divBoxList[j].style.left=Math.floor(Math.random()*600)+'px'; 
				 	}else{ 
				 		if (j>15) {
			 				divBoxList[j].style.color='#'+color[15]; 
				 		}else{
					 	 	divBoxList[j].style.color='#'+color[j]; 

				 		};
				 		divBoxList[j].style.top = divBoxList[j].offsetTop+speed+'px';  
				 		console.log(divBoxList.length); 

				 	}; 


			 	};
				 
			},100);

		} 

		// 把生成的div盒子列表添加到大盒子中
		function appendDivList(){
				var divBoxList = drawDivsList();
				
				for (i = 0; i < divBoxList.length; i++) {
					$cont.appendChild(divBoxList[i]); 
					divBoxList[i].style.top=Math.floor(Math.random()*500)+'px';
			 		divBoxList[i].style.left=Math.floor(Math.random()*600)+'px';  
				}
				return $cont;
				
		}

		// color 随机生成函数
 		function borthColor(){
 			var color = new Array();
 			for (var i = 0; i < 17; i++) {
 				var g = i.toString(16);
 				color.push('0'+g+'0');
 			}; 
			console.log('color snows:'+color.length) 
			return color;
 		}
 		
 		// create 1 or 0
 		// create enCode
 		function drawCont(){ 
 			var enCodes = Math.floor(Math.random()*26+65)
 			printCount = String.fromCharCode(enCodes);  
 			// printCount='*'
 			return printCount;
 		} 

 		// creat single span function
 		function creatCont(){
 			 $creatSnows = document.createElement('span') 
			 $creatSnows.setAttribute('class','snows')
			 $creatSnows.innerText=drawCont(); 
			 // $cont.appendChild($creatSnows);   //加入到大容器中
 			 return $creatSnows;
 		}

 		// 画每一个div盒子中的n个span标签
		function drawSpanList(){
			var snowsList = new Array();
			for (var i = 0; i < 6; i++) { 
				 creatCont();    
				 snowsList.push($creatSnows);
				 snowsList[i].style.color 
			}
			// console.log(snowsList.length);
			return snowsList;
		}


 		// create single divBox function 
		function createDivs(){  
			 var snowsList = drawSpanList();
			 // console.log(snowsList.length);
 			 $creatDivs = document.createElement('div')
 			 $creatDivs.setAttribute('class','divbox')
 			 $creatDivs.setAttribute('name','singlebox')
 			 for (var i = 0; i < snowsList.length; i++) {
 			 	$creatDivs.appendChild(snowsList[i]) 
 			 };
 			 return $creatDivs; 
			 // $cont.appendChild($creatDivs);  
			

 		}
	
	 	// 画n个div盒子
		function drawDivsList(){
			var divBoxList = new Array();
			for (var i = 0; i < cont; i++) { 
				 createDivs();    
				 divBoxList.push($creatDivs); 
			} 
			// console.log(divBoxList.length);
			return divBoxList;
		}
		
 
 		
 		 

	</script>
 		}
</body>
</html>

然后就是这个样子：

<img src="https://img-blog.csdn.net/20151216135356069?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />