Matrix wersja 2.

Matrix wersja 2.

Dodano: 2010-11-26

Uruchomienie skryptu nastąpi po załadowaniu całej zawartości strony.

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

Testowane w przeglądarkach Firefox 3.6.1, Opera 10.63 oraz Internet Explorer 8.

W przypadku IE 8 należy zainstalować skrypt ze strony Microsoft, który umożliwi działania matrix-a bez ciągłego komunikatu o dużej ilości obliczeń i możliwości przestania działania przeglądarki. Po zainstalowaniu łaty stronka ze skryptem będzie się ładowała jakiś czas, a przeglądarka może przestać odpowiadać.

Poniżej kod animacji, bibliotekę jQuery należy pobrać i umieścić w folderze gdzie będzie umieszczona strona.

Drukuj Zaznacz kod
matrix.css
#matrix {
	background-color: #000000;
	color: #004900;
	width: 480px;
	font-size: 16px;
	font-family: times new roman, Verdana, Arial, Helvetica, sans-serif;
}

#matrix, #matrix p {
	margin: 0px auto;
	padding: 0px;
}

#matrix {
	margin-top: 35px;
}
Drukuj Zaznacz kod
matrix.htm
<html>
<head>

<link rel="Stylesheet" type="text/css" href="matrix.css" >

<script type="text/javascript" src="../jquery/jquery-1.4.4.js"></script>

<script type="text/javascript">

function Hex(){
	this.hexadecimalToNumber = function(char){
		var charNum = char.charCodeAt(0);
		switch (charNum) {
			case 65: return 10; break;
			case 97: return 10; break;
			case 66: return 11; break;
			case 98: return 11; break;
			case 67: return 12; break;
			case 99: return 12; break;
			case 68: return 13; break;
			case 100: return 13; break;
			case 69: return 14; break;
			case 101: return 14; break;
			case 70: return 15; break;
			case 102: return 15; break;
			default: return char;
		}
	}

	this.numberToHexadecimal = function(number){
		switch (number) {
			case 10: return "a"; break;
			case 11: return "b"; break;
			case 12: return "c"; break;
			case 13: return "d"; break;
			case 14: return "e"; break;
			case 15: return "f"; break;
			default: return  number;
		}
	}
	
	this.hexadecimalToDecimal = function(hexo){
		var decimal = 0;
		var l = hexo.length;
		var j = 0;

		for (i=l; i>0; i--) {  
			decimal += Math.pow(16, i-1) * this.hexadecimalToNumber(hexo.charAt(j));
			j++;
		}
		
		return decimal;
	}
}

function Matrix(){
	var countP;
	var countS;
	var colorJump;
	var colorLength;
	var dictonary = "abcdefghijklmnopqrstuwxyz";

	this.init = function(lenChar){	
		this.countS = lenChar;
		this.colorLength = 25;
		this.colorJump = 10;
		var $kids = $('#matrix').children();
		this.countP = $kids.length;

		this.generateSpan($kids);
		this.generateCharInTag($kids, 0);
	}
	
	this.isColorInHex = function(color){
		if (color.charAt(0) == '#')
			return true;
		return false;
	}
	
	this.getGreenValueOfColor = function(color){
		if (this.isColorInHex(color) == true)
			return this.getGreenHex(color);
		else
			return this.getGreenRGB(color);
		
	}
	
	this.getGreenHex = function(color){
		var colorNum = 0;
		var h = new Hex();
		
		var  ff = color.charAt(3) + "" + color.charAt(4);
		return h.hexadecimalToDecimal(ff);
	}

	this.getGreenRGB = function(color){
		var colorNum = 0;
		for (var i=0; i<color.length; i++){
			if (color.charAt(i) == ','){
				for (j=i+1; color.charAt(j) != ',';j++){
					colorNum *= 10;
					colorNum += (color.charAt(j) * 1);
				}
				break;
			}
		}
		return colorNum;
	}

	this.generateCharInTag = function($obj, numObj){
		for (var i=0; i<this.countS; i++){
			this.generateCharInOneSpan($obj, i);
		}
	}

	this.randCharFromDictonary = function(){
		var l = dictonary.length-1;
		var r = 0;

		r = Math.floor(Math.random()*l);
		return dictonary.charAt(r);
	}

	this.generateCharInOneSpan = function($obj, numSpan){
		var addSpace = 0;
		addSpace = Math.floor(Math.random()*2);
		if (addSpace == 0)
			$obj.children().eq(numSpan).text(this.randCharFromDictonary());
		else
			$obj.children().eq(numSpan).text('\u00A0');
			
		$obj.children().eq(numSpan).css("color", "rgb(0, 255, 0)");
	}

	this.generateSpan = function($obj){
		for (var i=0; i<this.countP; i++){
			$obj.eq(i).text("");
			for (var j=0; j<this.countS; j++)
				$obj.eq(i).append("<span>\u00A0</span>");
		}
	}

	this.changeElementsColor = function($obj){
		var color = 0;
		var l = dictonary.length-1;

		for (var i=0; i<this.countS; i++){
			color = this.getGreenValueOfColor($obj.children().eq(i).css("color"));
			if ((color > 88) && ($obj.children().eq(i).text() != '\u00A0')){
				$obj.children().eq(i).css("color", "rgb(0, " + (color - this.colorLength) +", 0)");
				$obj.children().eq(i).text(this.randCharFromDictonary());
			} else
				this.generateCharInOneSpan($obj, i);
		}
	}
}

Matrix.prototype = {
	start: function(obj){
		var $ob = $('#matrix').children();
		for (var i=this.countP-1; i>0; i--){
			$ob.eq(i).text("");
			$ob.eq(i).html($ob.eq(i-1).html());
		}

		this.changeElementsColor($ob.eq(0));

		setTimeout(function(){obj.start(obj);}, 100); 

	}
}

$(document).ready(function () {  
	var m = new Matrix();
	m.init(48);
	m.start(m);
}); 



</script>
</head>

<body>
<div id="matrix">
	<p><span></span><span></span><span></span></p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
	<p>matrix</p>
</div>

</body>
</html>
;