Javascripts Screensaver

De fleste vet hva en screensaver gjør, så nærmere forklaring skulle være unødvendig, men å ha screensaver på hjemmesiden er vel litt mer uvanelig.

En absolutt snedig liten detalj som er både morsom og ikke helt ubrukelig heller. Gjeldende screensaver er den gamle "Stjerner i Verdensrommet".

Eksempel: Vent 10 sekunder mens musen er i ro.

Sammen med koden nedenunder trengs en egen javascript fil, screensaver.js (Høyreklikk å velg 'Lagre mål som') som du laster ned og har i samme mappe som html dokumentet. Last deretter opp html dokumentet og scriptfilen til nettstedet ditt.

Scriptdel 1: Plasseres mellom <head> taggene

<script type="text/javascript" src="screensaver.js"></script>

<script type="text/javascript">
Point.prototype.move = function(x,y)
{
	this.oDiv.style.left = x + "px";
	this.oDiv.style.top = y + "px";
}

Point.prototype.setSize = function(nSize)
{
	this.oDiv.style.width = nSize + "px";
	this.oDiv.style.height = nSize + "px";
}

function StarFieldSaver(settings)
{	
	// default values
	this.speed = 50;
	this.nStars = 50;
	this.zIndex = 1000;
		
	// override with settings values
	if ( settings.speed ) this.speed = settings.speed;
	if ( settings.nStars ) this.nStars = settings.nStars;
	if ( settings.zIndex ) this.zIndex = settings.zIndex;
}
StarFieldSaver.prototype.init = function()
{	
	this.oCanvas = document.createElement("div");
	document.body.appendChild(this.oCanvas);
	this.oCanvas.style.zIndex = this.zIndex;
	this.oCanvas.style.position = "absolute";
	this.oCanvas.style.backgroundColor = "black";

this.g = new Graphics(this.oCanvas);
	this.g.penColor = "white";
	
	this.aPoints = new Array();
}
StarFieldSaver.prototype.start = function()
{
	if ( this.bActive ) return;
	this.bActive = true;
	
	if ( !this.oCanvas ) this.init();
	this.oCanvas.style.visibility = "visible";
	this.tick();
}
StarFieldSaver.prototype.stop = function()
{
	if ( !this.bActive ) return;
	
	window.clearTimeout(this.timerID);
	this.oCanvas.style.visibility = "hidden";

for ( var i in this.aPoints )
	{
		this.aPoints[i].undraw();
	}
	this.aPoints = new Array();

this.bActive = false;
}
StarFieldSaver.prototype.tick = function()
{
	this.oCanvas.style.left = document.body.scrollLeft + "px";
	this.oCanvas.style.top = document.body.scrollTop + "px";
	this.oCanvas.style.width = document.body.clientWidth + "px";
	this.oCanvas.style.height = document.body.clientHeight + "px";
	
	this.width = document.body.clientWidth;
	this.height = document.body.clientHeight;
	
	var cx = this.width / 2;
	var cy = this.height / 2;
	for ( var i in this.aPoints )
	{
		var p = this.aPoints[i];
		var dx = p.x - cx;
		var dy = p.y - cy;
		
		// move point outwards
		p.x += dx / 50;
		p.y += dy / 50;
		if ( (p.x < 0) || (p.x > this.width - Math.ceil(p.n/50)) || (p.y < 0) || (p.y > this.height - Math.ceil(p.n/50)) )
		{
			p.x = Math.random() * this.width;
			p.y = Math.random() * this.height;
			p.n = 0;
		}
		p.move(Math.floor(p.x),Math.floor(p.y));

// resize as they get closer
		p.setSize(Math.ceil(p.n++ / 50)) 
	}
	
	while ( this.aPoints.length < this.nStars )
	{
		var x = Math.random() * this.width;
		var y = Math.random() * this.height;
		var p = this.g.drawPoint(Math.floor(x), Math.floor(y));
		p.setSize(1);
		p.x = x;
		p.y = y;
		p.n = 0;
		this.aPoints.push(p);
	}

var pThis = this;
	var f = function(){pThis.tick();}
	this.timerID = window.setTimeout(f,this.speed);
}

function ScreenSaver(settings)
{
	this.settings = settings;

this.nTimeout = this.settings.timeout;
			
	document.body.screenSaver = this;

// link in to body events
	document.body.onmousemove = ScreenSaver.prototype.onevent;
	document.body.onmousedown = ScreenSaver.prototype.onevent;
	document.body.onkeydown = ScreenSaver.prototype.onevent;
	document.body.onkeypress = ScreenSaver.prototype.onevent;
	
	var pThis = this;
	var f = function(){pThis.timeout();}
	this.timerID = window.setTimeout(f, this.nTimeout);
}
ScreenSaver.prototype.timeout = function()
{
	if ( !this.saver )
	{
		this.saver = this.settings.create();
	}
	this.saver.start();
}
ScreenSaver.prototype.signal = function()
{
	if ( this.saver )
	{
		this.saver.stop();
	}
	
	window.clearTimeout(this.timerID);
	
	var pThis = this;
	var f = function(){pThis.timeout();}
	this.timerID = window.setTimeout(f, this.nTimeout);
}

ScreenSaver.prototype.onevent = function(e)
{
	this.screenSaver.signal();
}

var saver;
function initScreenSaver()
{
	//blort;
	saver = new ScreenSaver({timeout:10000,speed:50,nStars:100,zIndex:100,create:function(){return new StarFieldSaver(this);}});
}

</script>

Scriptdel 2: Plasseres mellom <body> taggene

Scriptdel 3: screensaver.js (Høyreklikk å velg 'Lagre mål som' Lagres i samme mappe som dokument)

SØK ressurser

HJELP til Hjemmesiden

Nyttige ressurser til ditt Hjemmesideprosjekt, alltid tilgjengelig. Klikk for å vise tilgjengelige ressurser.

Javascripts Screensaver

SØK ressurser

HJELP til Hjemmesiden

FLERE ressurser