Beispiel: Follow Mouse – Abschneiden

Über den Rand hinausragende DIV-Elemente werden abgeschnitten.

drweb.de - Magazin für Seitenbetreiber

JavaScript-Quelltext

jQuery.noConflict();

jQuery(document).ready(function() {
    var follow   = [];
    var timeDiff = 100;
    var mousePos = {x: 0, y: 0};


    // Absolut positioniertes Div erzeugen und an follow[] sowie
    // HTML Body anhängen.
    function addDiv(color) {
        var el = document.createElement("div");

        el.style.backgroundColor = color;

        el.style.position    = "absolute";
        el.style.left        = 0;
        el.style.top         = 0;

        el.style.margin      = 0;
        el.style.padding     = 0;
        el.style.borderWidth = 0;
        el.style.fontSize    = 0; // IE

        el.style.width       = "40px";
        el.style.height      = "40px";

        follow.push(el);

        document.getElementsByTagName("body")[0].appendChild(el);
    }// addDiv


    function setPos(el, left, top) {
        // Position ohne "px": 40px -> 40
        left = parseFloat(left, 10);
        top  = parseFloat(top, 10);


        // Breite und Höhe des Scrollbereichs
        var docWidth  = jQuery(document).width();
        var docHeight = jQuery(document).height();


        var curWidth  = 40;
        var curHeight = 40;


        // Über Rand -> Breite/Höhe verkleinern
        if(left + 40 > docWidth) {
            curWidth = 40 - ((left + 40) - docWidth);
        }

        if(top + 40 > docHeight) {
            curHeight = 40 - ((top + 40) - docHeight);
        }


        // Position setzen
        el.style.left = left + "px";
        el.style.top  = top  + "px";


        // Breite/Höhe setzen
        if(curWidth > 0 && curHeight > 0 ) {
            el.style.width   = curWidth  + "px";
            el.style.height  = curHeight + "px";
            el.style.display = "block";
        } else {
            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].style.left,
                              follow[i - 1].style.top);
        }

        // follow[0].pos = Aktuelle Position des Mauszeigers im Dokument
        setPos(follow[0], mousePos.x + 10, mousePos.y + 10);
    }// move


    // Divs erzeugen
    addDiv("red");     // follow[0]
    addDiv("green");
    addDiv("blue");
    addDiv("yellow");
    addDiv("aqua");
    addDiv("fuchsia"); // follow[5]


    // Mousemove-Handler
    jQuery(document).mousemove(function(e) {
        mousePos.x = e.pageX;
        mousePos.y = e.pageY;
    });// mousemove


    // Zeitgeber starten
    setInterval(move, timeDiff);
});// jQuery(document).ready(function() {