Question

我想在页面中插入跟随箭头的动作眼睛，如此页http://www.michaelbach.de/ot/ 有谁知道怎么做？

Answer 1

从该页面的来源：

var mouseX = 0, mouseY = 0, rx = 0, ry = 0, timer4DoOneMove = null, eyeBalls, eyeLeft, eyeRight, gEyesVisible=true;
function DoOneMove() {
    if (!gEyesVisible) {
        MoveObject(-100, -100, eyeBalls); MoveObject(-100, -100, eyeLeft); MoveObject(-100, -100, eyeRight);        
    } else {
        rx += (mouseX - rx - 40) * 0.03, ry += (mouseY - ry - 50) * 0.03; 
        var dy = mouseY - ry - 20, dx1 = mouseX - rx - 20, dx2 = mouseX - rx - 60;
        var r = Math.max(20, Math.sqrt(dx1 * dx1 + dy * dy));
        dx1 = dx1 * 10 / r + rx + 15, dy1 = dy * 3 / r + ry + 3;
        r = Math.max(20, Math.sqrt(dx2 * dx2 + dy * dy));
        dx2 = dx2 * 10 / r + rx + 55;
        MoveObject(rx, ry, eyeBalls); MoveObject(dx1, dy1, eyeLeft); MoveObject(dx2, dy1, eyeRight);
    }
    timer4DoOneMove = setTimeout("DoOneMove()", 100);
}

function MoveObject(xPos, yPos, theObject) {
    theObject.style.left = Math.round(xPos) + "px"; theObject.style.top = Math.round(yPos) + "px";
}

function MyMouseMovedHandler(e) {
    function MyMouseMovedTo(xPos, yPos) {mouseX = xPos; mouseY = yPos;}
    if (e) {
        MyMouseMovedTo(e.pageX, e.pageY); return null;//return routeEvent(e);
    }
    if (event) {
        MyMouseMovedTo(event.clientX+window.document.body.scrollLeft, yPos = event.clientY+window.document.body.scrollTop);
    }
    return null; 
}

function ClearMyTimer() {
    if (timer4DoOneMove != null) clearTimeout(timer4DoOneMove);
}

function SetupEyes1() {
    var eyeballsURL = "watching_eyes/eyeballs.gif", eyeURL = "watching_eyes/eye.gif";
    s = '<div ID="eyeballsID"><img SRC="'+eyeballsURL+'"><\/div>'
    s += '<div ID="eyeLeftID"><img SRC="'+ eyeURL +'"><\/div>'
    s += '<div ID="eyeRightID"><img SRC="'+ eyeURL +'"><\/div>';
    document.writeln(s);
    eyeBalls = document.getElementById("eyeballsID"); eyeBalls.style.position = "absolute";
    eyeLeft = document.getElementById("eyeLeftID"); eyeLeft.style.position = "absolute";
    eyeRight = document.getElementById("eyeRightID"); eyeRight.style.position = "absolute";
    if (document.layers) document.captureEvents(Event.MOUSEMOVE); 
    document.onmousemove = MyMouseMovedHandler;
    if (document.all) document.onmousemove = MyMouseMovedHandler;
    window.onunload = ClearMyTimer;
    DoOneMove();
}

function EyesOnOff() {
    if (gEyesVisible) {
        gEyesVisible = false;  document.getElementsByName("eyesOnOffButton")[0].value = "eyes on";
    } else {
        gEyesVisible = true;  document.getElementsByName("eyesOnOffButton")[0].value = "eyes off";
    }
}

运动眼睛在网页上

1 个答案: