1

フェリックスによる英訳:

マウスカーソルに追従し、カーソルが一定の距離にあると移動を停止するメニューを作成したいと思います。これまでの私の解決策:2つのネストされたdivを作成しました。内部divにはメニューが含まれています。外側のdivは、メニューを停止するためのものです。カーソルが外側のdivの上に移動した場合、内側のdivは停止し、カーソルが外側のdivの上にある限り留まります。*編集:そして、メニューはソフトに、しかし素早く停止するはずです。

元のドイツ語:

ichmöchteeinMenüerstellenwelchesmeinenMauszeiger verfolgtundinbestimmternähestehenbleibt。MeinLösungsansatzistfolgender:Ich baue 2 ineinanderverschachtelteDIVs。Im innerenDIVistdasMenüvorhanden。DasäußereDivistzumstoppenda。また、wenn ich mit demMauszeigerindasäußereDivgehesolldas innere DIV stark abbremsen und stehen bleiben、solange ichdrinbin。

Hier mein derzeitigerコード(fw's:jQuery):

var div = jQuery("<div id='menubox'><div id='innerdiv'>&nbsp;</div></div>").appendTo("body");

    var mouseX = 300, mouseY = 300;
    jQuery(document).mousemove(function (el) {
        if (onMenu == false) {
            mouseX = el.pageX;
            mouseY = el.pageY;
        }
    });

    jQuery('#menubox').mouseenter(function (el) {
        onMenu = true;
        stopMoving();
    }).mouseleave(function (el) {
        onMenu = false;
        startMoving();
    });

    var xp = 0, yp = 0;
    function stopMoving() {
        clearTimeout(timer);
        timer = setTimeout(function () {
            clearInterval(loop);
        }, 100);
    }
    function startMoving() {
        clearTimeout(timer);
        clearInterval(loop);
        loop = setInterval(function () {
            xp += (mouseX - xp) / 20;
            yp += (mouseY - yp) / 20;
            jQuery('#menubox').css({ left: xp, top: yp });
        }, 40);
    }
    startMoving(); // StartMoving on Page Load

*編集:IEのバグがありました。外側のdivに透明なgifを配置する必要がありました。これで、この関数は問題ありません。外側または内側のdivにいる場合、divは移動しませんが、すぐに停止することはありません。それは非常に柔らかく速く停止し、200pxのように動かないようにし、clearIntervall()で停止または停止します。もう1つタイマーを作る必要がありますか?

4

0 に答える 0