Der Mauszeiger wird von Grafiken verfolgt.
drweb.de - Magazin für Seitenbetreiber
IconEden.com - Yummy! Free Food and Cakes Icon Set
jQuery.noConflict();
jQuery(document).ready(function() {
var images = ["../images/yummy_3_64x64.png" , "../images/yummy_13_64x64.png",
"../images/yummy_15_64x64.png", "../images/yummy_20_64x64.png",
"../images/yummy_12_64x64.png"];
var follow = [];
var timeDiff = 100;
var mousePos = {x: 0, y: 0};
// Konstruktor-Funktion für einen Verfolger
function Item(element, left, top, width, height) {
this.el = element;
this.left = left;
this.top = top;
this.width = width;
this.height = height;
}// Item
function setPos(item, left, top) {
item.left = left;
item.top = top;
// Breite und Höhe des Scrollbereichs
var docWidth = jQuery(document).width();
var docHeight = jQuery(document).height();
var curWidth = item.width;
var curHeight = item.height;
// Über Rand -> Breite/Höhe verkleinern
if(item.left + item.width > docWidth) {
curWidth = item.width - ((item.left + item.width) - docWidth);
}
if(item.top + item.height > docHeight) {
curHeight = item.height - ((item.top + item.height) - docHeight);
}
// Position setzen
item.el.style.left = item.left + "px";
item.el.style.top = item.top + "px";
// Breite/Höhe setzen
if(curWidth > 0 && curHeight > 0 ) {
item.el.style.width = curWidth + "px";
item.el.style.height = curHeight + "px";
item.el.style.display = "block";
} else {
item.el.style.display = "none";
}
}// setPos
function move() {
// follow[5].pos = follow[4].pos;
// follow[4].pos = follow[3].pos;
// ...
// follow[1].pos = follow[0].pos;
for(var i = follow.length - 1; i > 0; i--) {
setPos(follow[i], follow[i - 1].left,
follow[i - 1].top);
}
// follow[0].pos = Aktuelle Position des Mauszeigers im Dokument
setPos(follow[0], mousePos.x + 10, mousePos.y + 10);
}// move
// Mousemove-Handler
jQuery(document).mousemove(function(e) {
mousePos.x = e.pageX;
mousePos.y = e.pageY;
});// mousemove
function preloadImages(imageURLS, onFinish) {
var imageCount = 0;
var images = [];
for(var i = 0; i < imageURLS.length; i++) {
images[i] = new Image();
images[i].onload = function() {
imageCount++;
if(imageCount == imageURLS.length) {
onFinish(images);
}
};// images[i].onload = function() {
images[i].onerror = function() {
throw "Loading images failed";
};// images[i].onerror = function() {
images[i].src = imageURLS[i];
}// for(var i = 0; i < imageURLS.length; i++) {
}// preloadImages
// Divs mit Grafiken erzeugen
function initImages(images) {
var body = document.getElementsByTagName("body")[0];
var el = null;
var item = null;
for(var i = 0; i < images.length; i++) {
el = document.createElement("div");
el.style.position = "absolute";
el.style.display = "block";
el.style.overflow = "hidden";
el.style.backgroundColor = "transparent";
el.style.left = mousePos.x + "px";
el.style.top = mousePos.y + "px";
el.style.margin = 0;
el.style.padding = 0;
el.style.borderWidth = 0;
el.style.fontSize = 0; // IE
// Grafik in Div legen
el.appendChild(images[i]);
body.appendChild(el);
item = new Item(el, mousePos.x, mousePos.y,
jQuery(el).width(), jQuery(el).height());
follow.push(item);
}// for(i = 0; i < images.length; i++) {
// Zeitgeber starten
setInterval(move, timeDiff);
}// initImages
// Starten via preloadImages -> divImages
preloadImages(images, initImages);
});// jQuery(document).ready(function() {