Beispiel: Follow Mouse – Grafik (Anpassung für IE)

Der Mauszeiger wird von Grafiken verfolgt (Anpassung für IE).

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();

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 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();


        // 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);
        }


        // 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
            if(typeof DrWeb !== "undefined" && DrWeb.islteIE6) {
                // AlphaImageLoader für <= IE6
                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 {
                // Alle anderen Webbrowser
                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


    preloadImages(images, initImages);
});// jQuery(document).ready(function() {