Der Mauszeiger wird von Grafiken oder Buchstaben verfolgt. Mit den Buttons lässt sich die Darstellung wechseln.
drweb.de - Magazin für Seitenbetreiber
IconEden.com - Yummy! Free Food and Cakes Icon Set
<!--[if IE]>
<script type="text/javascript">
if(typeof DrWeb === "undefined") {var DrWeb = {};}
DrWeb.isIE = true;
</script>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript">
if(typeof DrWeb === "undefined") {var DrWeb = {};}
DrWeb.islteIE6 = true;
</script>
<![endif]-->
jQuery.noConflict();
if(typeof DrWeb === "undefined") {var DrWeb = {};}
DrWeb.Followmouse = function(options) {
var self = this;
var follow = [];
var imageURLs = [];
var timer = null;
// Position des Mauszeigers
var mousePos = {x: 0, y: 0};
this.Item = function(element, left, top, width, height) {
this.el = element;
this.left = left;
this.top = top;
this.width = width;
this.height = height;
};// Item
this.setPos = function(item) {
// Breite und Höhe des Scrollbereichs
var docWidth = jQuery(document).width();
var docHeight = jQuery(document).height();
// Workaround für IE, wenn keine Scrolleisten vorhanden.
// In diesen Fällen ist die innere Breite/Höhe des HTML-Elements
// gleich der Breite/Höhe des Dokuments.
if(typeof DrWeb !== "undefined" && DrWeb.isIE) {
if(jQuery("html").innerWidth() == docWidth) {
docWidth = jQuery(window).width();
}
if(jQuery("html").innerHeight() == docHeight) {
docHeight = jQuery(window).height();
}
}// if(typeof DrWeb !== "undefined" && DrWeb.isIE) {
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);
}
// Element-Position setzen
item.el.style.left = item.left + "px";
item.el.style.top = item.top + "px";
// Element-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
this.move = function() {
for(var i = follow.length - 1; i > 0; i--) {
// Position an den nächsten Verfolger weitergeben
follow[i].left = follow[i - 1].left;
follow[i].top = follow[i - 1].top;
// Element-Position und -Größe setzen
self.setPos(follow[i]);
}
// Ersten Verfolger auf aktuelle Mausposition + Verschiebung setzen
follow[0].left = mousePos.x + 10;
follow[0].top = mousePos.y + 10;
// Element-Position und -Größe setzen
self.setPos(follow[0]);
};// move
this.start = function() {
if(imageURLs.length > 0) {
self.preloadImages(imageURLs, self.initImages);
} else {
self.doStart();
}
};// start
this.doStart = function() {
jQuery(document).bind("mousemove", self.mousemove);
var body = document.getElementsByTagName("body")[0];
for(var i = follow.length - 1; i >= 0; i--) {
// jQuery liefert erst Breite und Höhe, wenn das Element
// im DOM angehängt ist.
body.appendChild(follow[i].el);
follow[i].width = jQuery(follow[i].el).width();
follow[i].height = jQuery(follow[i].el).height();
}
timer = setInterval(self.move, 120);
};// doStart
this.stop = function() {
// Zeitgeber, Maus-Handler und Elemente entfernen
clearInterval(timer);
timer = null;
jQuery(document).unbind("mousemove", self.mousemove);
var body = document.getElementsByTagName("body")[0];
for(var i = 0; i < follow.length; i++) {
body.removeChild(follow[i].el);
}
follow = [];
};// stop
this.mousemove = function(e) {
// Aktuelle Mausposition speichern
mousePos.x = e.pageX;
mousePos.y = e.pageY;
};// mousemove
this.preloadImages = function(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 < images.length; i++)
};// preloadImages
this.initImages = function(images) {
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
if(typeof DrWeb !== "undefined" && DrWeb.islteIE6) {
var alphaImg = document.createElement("div");
alphaImg.style.margin = 0;
alphaImg.style.padding = 0;
alphaImg.style.borderWidth = 0;
alphaImg.style.fontSize = 0;
alphaImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + images[i].src + "')";
alphaImg.style.width = images[i].width + "px";
alphaImg.style.height = images[i].height + "px";
el.appendChild(alphaImg);
} else {
el.appendChild(images[i]);
}
item = new self.Item(el, mousePos.x, mousePos.y);
follow.push(item);
}// for(var i = 0; i < images.length; i++) {
self.doStart();
};// initImages
this.initText = function(text) {
var el = null;
var textNode = null;
var item = null;
for(var i = 0; i < text.length; i++) {
el = document.createElement("div");
el.style.position = "absolute";
el.style.display = "block";
el.style.overflow = "hidden";
el.style.backgroundColor = "transparent";
el.style.color = "black";
el.style.fontSize = "40px";
el.style.left = mousePos.x + "px";
el.style.top = mousePos.y + "px";
el.style.margin = 0;
el.style.padding = 0;
el.style.borderWidth = 0;
textNode = document.createTextNode(text.charAt(i));
el.appendChild(textNode);
item = new self.Item(el, mousePos.x, mousePos.y);
follow.push(item);
}// for(var i = 0; i < text.length; i++) {
};// initText
if(options.images) {
imageURLs = options.images;
} else if(options.text) {
self.initText(options.text);
}
};// DrWeb.Followmouse
jQuery(document).ready(function() {
var images = ["yummy_3_64x64.png" , "yummy_13_64x64.png",
"yummy_15_64x64.png", "yummy_20_64x64.png",
"yummy_12_64x64.png"];
var fm = new DrWeb.Followmouse({images: images});
fm.start();
jQuery("#useImages").click(function(e) {
fm.stop();
fm = new DrWeb.Followmouse({images: images});
fm.start();
});
jQuery("#useText").click(function(e) {
fm.stop();
fm = new DrWeb.Followmouse({text: "Follow Mouse"});
fm.start();
});
});// jQuery(document).ready(function() {