(function() {
var mX, mY, distance,
$distance = $('#distance span'),
$element = $('#element');
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}
$(document).mousemove(function(e) {
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance($element, mX, mY);
$distance.text(distance);
});
})();Dieser Code berechnet den Abstand zwischen dem Mauszeiger und dem Mittelpunkt eines Elements. Dies kann nützlich sein, um eine Funktion auszulösen, wenn sich die Maus in einem bestimmten Abstand zu einem Element befindet. Oder Sie können den Wert einer Eigenschaft, wie z. B. die Breite, Höhe oder Deckkraft des Elements, von der Nähe des Mauszeigers abhängig machen.
In diesem Fall ist der Punkt 0 die Mitte des Elements.
Wie wäre der Punkt 0 irgendwo im Element?
Das heißt, der Rand des Elements nimmt a = 0 weg
Danke für diesen Beitrag – das macht das Leben wirklich einfach.
Hallo,
Ich habe die letzten 3 Monate mit jQuery gearbeitet. Ich bin gut vertraut mit der Funktionalität, habe aber nie versucht, ein Plugin zu schreiben. Ich habe gerade mit der obigen Funktionalität angefangen zu experimentieren. Ich habe Folgendes geschrieben:
Wenn ich das tue, erhalte ich einen Fehler
Wo mache ich etwas falsch?
Sie haben es an das jQuery-Objekt (
$.fn.calculateDistance) angehängt, daher müssen Sie es wie$.calculateDistanceaufrufen.Oder hängen Sie es einfach nicht so an. Verschiedene Denkansätze. Da Ihre Funktion intern jQuery benötigt, ist es vielleicht gut, es so zu belassen.
Im Code, den Sie hinzugefügt haben, ist calculate distance keine einfache Funktion. Es ist eine jQuery-Funktion, daher müssen Sie sie als solche aufrufen.
$.calulateDistance($element, mX, mY);
Hallo, ich frage mich, ob es möglich ist, den Mittelpunkt des Elements zur aktuellen Mausposition zu verschieben. Irgendwelche Vorschläge bitte.
http://codepen.io/sonar/pen/tABGL?editors=001
In diesem Beispiel möchte ich den Kreis an die Position verschieben (ich meine, ich möchte, dass der Mittelpunkt des Kreises an der Cursorposition liegt), an der sich der Cursor gerade befindet, wenn ich mit der Maus darüber fahre.
Können Sie mir bitte bei der Lösung des Problems helfen?
Danke
Ich habe versucht, diesen Code zu verwenden, um etwas Besonderes zu machen. Ein Div, das die Höhe bis zur Mausposition berechnet, in Kombination mit Rotation. Bisher kein Glück, aber wenn Sie Ideen haben, können Sie diese gerne teilen :)
CodePen finden Sie hier
Siehe den Stift Afxlz (@sugomi) auf CodePen.
Funktioniert das auch, wenn man auf der Seite nach unten gescrollt hat? Denn ich würde denken, x und y bleiben nicht konstant, um sich beim Scrollen zu verschieben.
Hallo… Es gibt einen coolen Cursor-Effekt, bei dem sich eine Fuchs-Ikone in Richtung des Cursors bewegt, als würde sie den Cursor ansehen…
Es ist eine Chrome-Erweiterung, die Sie auf der Willkommensseite sehen können, sobald Sie die Erweiterung installieren.
Ich möchte nur wissen, wie es gemacht wird.
Hallo Leute. Nur für den Fall, dass jemand es mit reinem JS ausprobieren möchte.
(function() {
const counter = document.createElement(‘div’);
counter.id = “distance-counter”;
counter.style = “position: fixed; width: 100px; height: 50px; background: black; color: green; top: 20%; left: 0;”
document.body.appendChild(counter);
})();