jQuery Gauge mousemove – Tutorial

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

	

	

		

		

		

	

	

		

		

		

	


// 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');
		jQuery('div.example-box.view div.position_text').html('middle');
	} else if ( degree <= 10 ) {
		console.log('middle');
		jQuery('div.example-box.view div.position_text').html('middle');
	} else if ( degree >= 180 ) {
		console.log('left');
		jQuery('div.example-box.view div.position_text').html('left');
	} else if ( degree <= 10 ) {
		console.log('right');
		jQuery('div.example-box.view div.position_text').html('right');
	} else {
		console.log('right');
		jQuery('div.example-box.view div.position_text').html('right');
	}

	jQuery('div.example-box.view div.position_x').html(mouse_x);
	jQuery('div.example-box.view div.position_y').html(mouse_y);

}
jQuery('div.example-box.view div#target-box').mousemove(mouse);
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.

Als nächstes erstellen wir den Zeiger, der später rotieren soll.

Stylen der Box und des Pfeils

Im nächsten Schritt stylen wir den Pfeil und die Box. 

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);
}

Nun sollte es bei euch in etwa so aussehen:

jquery gauge mousemove tutorial

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

// MOVER
var pw		=	jQuery('div.example-box.view div#pointer-wrap');
var offset	=	pw.offset();

Erstellung einer Function

Nun erstellen wir eine function, die wir später aufrufen werden.

function mouse(e) {
	// CODE HERE
}

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. 

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 );

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 

var mouse_x		=	e.pageX; 
var mouse_y		=	e.pageY;

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. 

var radians		=	Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree		=	(radians * (180 / Math.PI) * -1) + 180;

Rotation mittels jQuery anhängen

Den Wert degree können wir nun mittels jQuery als css dem Element pointer-wrap anhängen. 

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)');

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.

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');
}

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.

jQuery('div.example-box.view div#target-box').mousemove(mouse);

Der komplette Code

Die komplette js sollte dann wie folgt aussehen

// 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);
Verfasst am 26.01.2018 Update 28.10.2019

revilodesign oli

1 Kommentar

Schreibe ein Kommentar zu jQuery Gauge mousemove – Tutorial

  1. avatar christianchristian sagt:
    27. Juni 2022 um 14:36 Uhr

    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);

    Antworten

Hinterlasse ein Kommentar zum Beitrag "jQuery Gauge mousemove – Tutorial"

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Follow Me

doch mal auf Instagram