フェリックスによる英訳:
マウスカーソルに追従し、カーソルが一定の距離にあると移動を停止するメニューを作成したいと思います。これまでの私の解決策: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'> </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つタイマーを作る必要がありますか?