费利克斯的英文翻译:
I want to create a menu which follows the mouse cursor and stops moving if the cursor is in a certain distance to it. My solution so far: I created two nested divs. In inner div contains the menu. The outer div is for stopping the menu. If the cursor moves over the outer div, the inner div should stop and stay as long as cursor hovers over it. *EDIT: And the menu should stop softly but quickly.
德语原件:
ich möchte ein Menü erstellen welches meinen Mauszeiger verfolgt und in bestimmter nähe stehen bleibt. Mein Lösungsansatz ist folgender: Ich baue 2 ineinander verschachtelte DIVs. Im inneren DIV ist das Menü vorhanden. Das äußere Div ist zum stoppen da. Also wenn ich mit dem Mauszeiger in das äußere Div gehe soll das innere DIV stark abbremsen und stehen bleiben, solange ich drin bin.
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 Bug。我不得不在外部div放置一个透明的gif。现在这个函数可以了。如果im在外部或内部div中,div不会移动,但不会很快停止。它应该非常柔软和快速地停止,不要移动,即200px,然后用clearInterval()停止或硬停止。我应该再做一个计时器吗?