jQuery Gauge mousemove – Tutorial
Verfasst am 26.01.2018
Update 28.04.2025
In diesem Tutorial möchte ich Euch zeigen, wie Ihr die Position der Mouse in einem Element dazu nutzen könnt, dass ein Pfeil mittels css die Position und damit die Richtung anzeigt.
- HTML
- JS
- CSS
HTML
<div id="moveWrapper">
<div id="target-box"></div>
<div class="infobox">
<div class="position_x"></div>
<div class="position_y"></div>
<div class="position_text"></div>
</div>
<div id="pointer-wrap">
<div id="pointer-arrow"></div>
<div id="pointer-neck"></div>
<div id="pointer-circle"></div>
</div>
</div>
JS
// MOVER
var pw = jQuery('div.demo-box-view div#pointer-wrap');
var offset = pw.offset();
// CHOOSER
function mouse(e) {
var center_x = (offset.left) + ( jQuery('div.demo-box-view div#pointer-wrap').width() / 2 );
var center_y = (offset.top) + ( jQuery('div.demo-box-view div#pointer-wrap').height() / 2 );
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 180;
pw.css('-moz-transform', 'rotate('+degree+'deg)');
pw.css('-webkit-transform', 'rotate('+degree+'deg)');
pw.css('-o-transform', 'rotate('+degree+'deg)');
pw.css('-ms-transform', 'rotate('+degree+'deg)');
if ( degree >= 350 ) {
console.log('middle');
jQuery('div.demo-box-view div.position_text').html('middle');
} else if ( degree <= 10 ) {
console.log('middle');
jQuery('div.demo-box-view div.position_text').html('middle');
} else if ( degree >= 180 ) {
console.log('left');
jQuery('div.demo-box-view div.position_text').html('left');
} else if ( degree <= 10 ) {
console.log('right');
jQuery('div.demo-box-view div.position_text').html('right');
} else {
console.log('right');
jQuery('div.demo-box-view div.position_text').html('right');
}
jQuery('div.demo-box-view div.position_x').html(mouse_x);
jQuery('div.demo-box-view div.position_y').html(mouse_y);
}
jQuery('div.demo-box-view div#target-box').mousemove(mouse);
CSS
div#moveWrapper {
width: 100%;
height: 500px;
padding: 20px;
overflow: hidden;
position: relative;
}
div#target-box {
width: 100%;
height: 150px;
display: inline-block;
padding: 20px;
border: 1px solid #5dd39e;
}
/*-----------*/
/* !POINTER */
/*-----------*/
#page-wrap {
display: block;
position: relative;
z-index: 9;
}
#target-box {
display: block;
position: relative;
max-width: 100%;
}
#pointer-wrap {
display: block;
position: absolute;
bottom: -100px;
left: 50%;
width: 180px;
height: 180px;
margin: 0 0 -90px -90px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
#pointer-circle {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 350px;
margin: -175px 0 0 -175px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #5dd39e;
}
#pointer-neck {
display: block;
position: absolute;
top: -170px;
left: 50%;
width: 20px;
height: 80px;
margin-left: -10px;
background-color: #5dd39e;
}
#pointer-arrow {
display: block;
position: absolute;
top: -172px;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
background: transparent;
border-style: solid;
border-width: 10px;
border-bottom: none;
border-right: none;
border-color: #5dd39e;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
Erstellen der Elemente
Als erstes erstellen wir ein Div, auf das unser jQuery später reagiert und die Mausbewegung ausliest.
html
<div id="target-box"></div>
Mehr anzeigen
Als nächstes erstellen wir den Zeiger, der später rotieren soll.
html
<div id="pointer-wrap">
<div id="pointer-arrow"></div>
<div id="pointer-neck"></div>
<div id="pointer-circle"></div>
</div>
Mehr anzeigen
Stylen der Box und des Pfeils
Im nächsten Schritt stylen wir den Pfeil und die Box.
css
div#target-box {
width: 100%;
height: 50px;
display: inline-block;
padding: 20px;
border: 1px solid #5dd39e;
}
/*-----------*/
/* !POINTER */
/*-----------*/
#page-wrap {
display: block;
position: relative;
z-index: 9;
}
#target-box {
display: block;
position: relative;
max-width: 100%;
}
#pointer-wrap {
display: block;
position: absolute;
bottom: -100px;
left: 50%;
width: 180px;
height: 180px;
margin: 0 0 -90px -90px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
#pointer-circle {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 350px;
margin: -175px 0 0 -175px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #5dd39e;
}
#pointer-neck {
display: block;
position: absolute;
top: -170px;
left: 50%;
width: 20px;
height: 80px;
margin-left: -10px;
background-color: #5dd39e;
}
#pointer-arrow {
display: block;
position: absolute;
top: -172px;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
background: transparent;
border-style: solid;
border-width: 10px;
border-bottom: none;
border-right: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
Mehr anzeigen
Nun sollte es bei euch in etwa so aussehen:
Auslesen der Mousezeigerposition
Da wir nun das Element target-box definiert & den Pfeil gestylt haben können wir mit der Animation anfangen. Zunächst einmal definieren wir den Mover, also den Pfeil. Wir werden nämlich die Position des Mauszeigers ermitteln und die Werte dem Element pointer-wrap anhängen mittels des css-Befehl transform: rotate
javascript
// MOVER
var pw = jQuery('div.example-box.view div#pointer-wrap');
var offset = pw.offset();
Mehr anzeigen
Erstellung einer Function
Nun erstellen wir eine function, die wir später aufrufen werden.
javascript
function mouse(e) {
// CODE HERE
}
Mehr anzeigen
Mittelpunkt ermitteln
Im nächsten Schritt berechnen wir die Rotation des Pfeils ausgehend von links (center_x) & von oben (center_y) und teilen die Höhe und die Weite durch 2. Somit haben wir genau den Mittelpunkt ermittelt.
javascript
var center_x = (offset.left) + ( jQuery('div.example-box.view div#pointer-wrap').width() / 2 );
var center_y = (offset.top) + ( jQuery('div.example-box.view div#pointer-wrap').height() / 2 );
Mehr anzeigen
Mauszeiger Position ermitteln
Als nächstes ermitteln wir die Position des Mauszeigers (mouse_x & mouse_y). Nun, da wir den Mittelpunkt haben, sowie die Position der Maus.
javascript
var mouse_x = e.pageX;
var mouse_y = e.pageY;
Mehr anzeigen
Radius & Neigung des Pfeils berechnen
Nun wird der Radius, anhand der Werte die wir zuvor ermittelt haben, berechnet. Anhand des Radius können wir auch die Gradzahl berechnen, um das sich der Mauszeiger neigen soll.
javascript
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 180;
Mehr anzeigen
Rotation mittels jQuery anhängen
Den Wert degree können wir nun mittels jQuery als css dem Element pointer-wrap anhängen.
javascript
pw.css('-moz-transform', 'rotate('+degree+'deg)');
pw.css('-webkit-transform', 'rotate('+degree+'deg)');
pw.css('-o-transform', 'rotate('+degree+'deg)');
pw.css('-ms-transform', 'rotate('+degree+'deg)');
Mehr anzeigen
Weitere Möglichkeiten der Verwendung
Mittels degree können wir jetzt auch definieren, ob sich der Pfeil links, mittig oder rechts befindet. Diese Information können wir mittels Klassen Elementen anfügen, die dann vielleicht sichtbar werden sollen oder eine andere Hintergrundfarbe bekommen sollen. Die Möglichkeiten sind dabei Euch überlassen.
javascript
if ( degree >= 350 ) {
console.log('middle');
} else if ( degree <= 10 ) {
console.log('middle');
} else if ( degree >= 180 ) {
console.log('left');
} else if ( degree <= 10 ) {
console.log('right');
} else {
console.log('right');
}
Mehr anzeigen
Function übergeben
Schlussendlich müssen wir die function noch aufrufen, sobald wir mit der Maus über das Element target-box fahren. Sobald sich die Maus auf diesem Element bewegt reagiert die function mouse() und der Pfeil beginnt sich zu bewegen.
javascript
jQuery('div.example-box.view div#target-box').mousemove(mouse);
Mehr anzeigen
Der komplette Code
Die komplette js sollte dann wie folgt aussehen:
javascript
// MOVER
var pw = jQuery('div.example-box.view div#pointer-wrap');
var offset = pw.offset();
// CHOOSER
function mouse(e) {
var center_x = (offset.left) + ( jQuery('div.example-box.view div#pointer-wrap').width() / 2 );
var center_y = (offset.top) + ( jQuery('div.example-box.view div#pointer-wrap').height() / 2 );
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 180;
pw.css('-moz-transform', 'rotate('+degree+'deg)');
pw.css('-webkit-transform', 'rotate('+degree+'deg)');
pw.css('-o-transform', 'rotate('+degree+'deg)');
pw.css('-ms-transform', 'rotate('+degree+'deg)');
if ( degree >= 350 ) {
console.log('middle');
} else if ( degree <= 10 ) {
console.log('middle');
} else if ( degree >= 180 ) {
console.log('left');
} else if ( degree <= 10 ) {
console.log('right');
} else {
console.log('right');
}
}
jQuery('div.example-box.view div#target-box').mousemove(mouse);
Mehr anzeigen
2 Likes
1 Kommentar
Schreibe ein Kommentar zu jQuery Gauge mousemove – Tutorial
Hallo Oli,
danke für die gute Erklärung. Kann es sein das es einen „Dreher“ bei Math.atan2(y, x) gibt https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2,
für
var radians = Math.atan2(mouse_x – center_x, mouse_y – center_y);
also
var radians = Math.atan2(mouse_y – center_y, mouse_x – center_x);