Matrix.

Dodano: 2010-11-20

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

matrix

Powyższa animacja została wykonana przy użyciu javascript oraz biblioteki jQuery. Dzięki połączeniu tych dwóch narzędzi można przyspieszyć implementację (ilość kodu jak i czas kodowania) animacji, zmian na stronach internetowych. Osobiście uważam, że użycie jQuery jest mniej czytelne od kodu napisanego w czystym javascript, lecz w miarę używania tej biblioteki przestaje to być problemem.

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>

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

//author lis

function Matrix(){
	var count;

	this.overcrowdDiv = function(len){
		var text = "";
		for (var i=0; i<len; i++){
			var r = Math.floor(Math.random()*3);
			if (r == 0)
				text += "0";
			else if (r == 1)
				text += "1";
			else 
				text += "\u00A0\u00A0";
		}
		return text;
	}

	this.init = function(){	
		var $kids = $('#matrix').children();
		var len = $kids.length;
		var jump = parseInt(255/len);
		for (var i=0; i<len; i++){
			$('#matrix').children().eq(i).text(this.overcrowdDiv(60));
			$('#matrix').children().eq(i).css("color", "rgb(0, "+(255-i*jump)+", 0)");
		}
		this.count = len;
	}

	
}

Matrix.prototype = {
	start: function(obj){
		var text = $('#matrix').children().eq(0).text();
		$('#matrix').children().eq(0).text(this.overcrowdDiv(60));
		var temp = "";
		for (var i=1; i<this.count; i++){
			temp = $('#matrix').children().eq(i).text();
			$('#matrix').children().eq(i).text(text);
			text = temp;
		}

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

	}
}

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


//-->
</script>
</head>

<body>
	<div id="matrix">
		<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>
		<p>matrix</p>
	</div>
</body>
</html>