Beispiel: Follow Mouse – Demo

Der Mauszeiger wird von Grafiken oder Buchstaben verfolgt. Mit den Buttons lässt sich die Darstellung wechseln.

Grafik
Text

drweb.de - Magazin für Seitenbetreiber
IconEden.com - Yummy! Free Food and Cakes Icon Set

JavaScript-Quelltext

<!--[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() {