Celownik

Jak uzyskać efekt celownika podążającego za kursorem? Zasada jest bardzo prosta. Tworzymy cztery divy, które odpowiednio przesówamy. I tak - pionowe div zmienia tylko pozycję X, a poziomy pozycję Y. Czemu tworzymy aż 4, a nie 2? Gdybyśmy zastosowali 2 - wówczas znajdowały by się one pod kursorem, uniemożliwiając tym samym klikanie na obiekty.

Na początku musimy pobrać pozycję kursora. Zastosujemy funkcję, którą poznaliśmy tutaj:

		function pozycjaMyszki(e) {
			var pozX = 0;
			var pozY = 0;
			if (!e) var e = window.event;
			if (e.pageX || e.pageY) {
				 pozX = e.pageX;
				 pozY = e.pageY;
			} else if (e.clientX || e.clientY) {
				 pozX = e.clientX + document.body.scrollLeft;
				 pozY = e.clientY + document.body.scrollTop;
			}
			return [pozX,pozY]
		}
	

Następnie musimy utworzyć nasze divy. Moglibyśmy wstawić odpowiedni kod do html, jednak lepszym pomysłem jest utworzyć je dynamicznie w JS. Jeżeli ktoś wyłączy sobie JS, wówczas nie zobaczy całego "celownika", a my mu nie zaśmiecimy kodu.

	var pionT = document.createElement('div');
	var pionB = document.createElement('div');
	var poziomL = document.createElement('div');
	var poziomR = document.createElement('div');
	with (poziomL.style) {
		position = 'absolute';
		left = top = '0px';
		width = '100%';
		height = '1px';
		backgroundColor = 'red';
		zIndex = 1000;
	}

	with (poziomR.style) {
		position = 'absolute';
		left = top = '0px';
		width = '100%';
		height = '1px';
		backgroundColor = 'blue';
		zIndex = 1000;
	}

	with (pionT.style) {
		position = 'absolute';
		left = top = '0px';
		width = '1px';
		height = '100%';
		backgroundColor = 'black';
		zIndex = 1000;
	}

	with (pionB.style) {
		position = 'absolute';
		left = top = '0px';
		width = '1px';
		height = '100%';
		backgroundColor = 'green';
		zIndex = 1000;
	}

	var body = document.getElementsByTagName('body')[0];
		body.insertBefore(pionT,body.firstChild);
		body.insertBefore(pionB,body.firstChild);
		body.insertBefore(poziomL,body.firstChild);
		body.insertBefore(poziomR,body.firstChild);
		body.style.cursor = 'crosshair';
	

Tworzymy poziome i pionowe divy. Następnie dla każdego z nich za pomocą instrukcji with ustawiamy odpowiedni wygląd. Dzięki zastosowanie tej techniki, skróciliśmy mocno kod.
Po ustawieniu wyglądu pobieramy sekcję body, a następnie wstawiamy nasze divy na jej początku (tuż przed pierwszym dzieckiem). Dodatkowo ustawiamy kursor na crosshair.

Skoro mamy już utworzone bloki, czas najwyższy wprawić je w ruch. Najłatwiej zrobić to obsługując zdarzenie mousemove dla całego dokumentu. Musimy tylko odpowiednio obliczyć ich pozycje i wymiary. Prosta matematyka:

		document.onmousemove = function(e) {
			pionT.style.left = pozycjaMyszki(e)[0];
			pionT.style.height = pozycjaMyszki(e)[1] - 20;
			pionB.style.top = pozycjaMyszki(e)[1] + 20;
			pionB.style.left = pozycjaMyszki(e)[0];
			pionB.style.height = document.body.offsetHeight + document.body.scrollTop - pozycjaMyszki(e)[1] - 20;
			poziomL.style.top = pozycjaMyszki(e)[1];
			poziomL.style.width = pozycjaMyszki(e)[0] - 20;
			poziomR.style.left = pozycjaMyszki(e)[0] + 20; 
			poziomR.style.top = pozycjaMyszki(e)[1];
			poziomR.style.width = document.body.offsetWidth + document.body.scrollLeft - pozycjaMyszki(e)[0] - 20;
		}
	

Wykorzystałem właściwości strony, z których korzystałem w funkcji zwracającej pozycję myszki. Najłatwiej takie rzeczy rozpisać sobie na rysunku.

Końcowa funkcja tworząca divy i odpalająca zdarzenie mousemove dla dokumentu będzie miała postać:

	function load() {
		var pionT = document.createElement('div');
		var pionB = document.createElement('div');
		var poziomL = document.createElement('div');
		var poziomR = document.createElement('div');
			with (poziomL.style) {
				position = 'absolute';
				left = top = '0px';
				width = '100%';
				height = '1px';
				backgroundColor = 'red';
			}

			with (poziomR.style) {
				position = 'absolute';
				left = top = '0px';
				width = '100%';
				height = '1px';
				backgroundColor = 'blue';
			}

			with (pionT.style) {
				position = 'absolute';
				left = top = '0px';
				width = '1px';
				height = '100%';
				backgroundColor = 'black';
			}

			with (pionB.style) {
				position = 'absolute';
				left = top = '0px';
				width = '1px';
				height = '100%';
				backgroundColor = 'green';
			}

		var body = document.getElementsByTagName('body')[0];
			body.insertBefore(pionT,body.firstChild);
			body.insertBefore(pionB,body.firstChild);
			body.insertBefore(poziomL,body.firstChild);
			body.insertBefore(poziomR,body.firstChild);
			body.style.cursor = 'crosshair';
	

		document.onmousemove = function(e) {
			pionT.style.left = pozycjaMyszki(e)[0];
			pionT.style.height = pozycjaMyszki(e)[1] - 20;
			pionB.style.top = pozycjaMyszki(e)[1] + 20;
			pionB.style.left = pozycjaMyszki(e)[0];
			pionB.style.height = document.body.offsetHeight + document.body.scrollTop - pozycjaMyszki(e)[1] - 20;
			poziomL.style.top = pozycjaMyszki(e)[1];
			poziomL.style.width = pozycjaMyszki(e)[0] - 20;
			poziomR.style.left = pozycjaMyszki(e)[0] + 20; 
			poziomR.style.top = pozycjaMyszki(e)[1];
			poziomR.style.width = document.body.offsetWidth + document.body.scrollLeft - pozycjaMyszki(e)[0] - 20;
		}
	}
	

Wystarczy teraz dołączyć funkcję zwracającą pozycję myszki, odpalić funkcje load() i możemy cieszyć się ładnym celownikiem ^^.