JavaScript - Maus: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 1: | Zeile 1: | ||
| − | == Mausrichtung - links oder rechts == | + | == Mausrichtung == |
| + | === Mausrichtung - links oder rechts === | ||
<pre> | <pre> | ||
var direction = "", | var direction = "", | ||
| Zeile 20: | Zeile 21: | ||
</pre> | </pre> | ||
| − | == Mausrichtung 2 == | + | === Mausrichtung 2 === |
<pre> | <pre> | ||
var bodyElement = document.querySelector("body"); | var bodyElement = document.querySelector("body"); | ||
| Zeile 52: | Zeile 53: | ||
} | } | ||
</pre> | </pre> | ||
| − | ===Mausrichtung 3 - jQuery Plugin=== | + | === Mausrichtung 3 - jQuery Plugin === |
<pre> | <pre> | ||
/** | /** | ||
Version vom 19. Januar 2017, 17:25 Uhr
Mausrichtung
Mausrichtung - links oder rechts
var direction = "",
oldx = 0,
mousemovemethod = function (e) {
if (e.pageX < oldx) {
direction = "left"
} else if (e.pageX > oldx) {
direction = "right"
}
document.body.innerHTML = direction;
oldx = e.pageX;
}
document.addEventListener('mousemove', mousemovemethod);
Mausrichtung 2
var bodyElement = document.querySelector("body");
bodyElement.addEventListener("mousemove", getMouseDirection, false);
var xDirection = "";
var yDirection = "";
var oldX = 0;
var oldY = 0;
function getMouseDirection(e) {
//deal with the horizontal case
if (oldX < e.pageX) {
xDirection = "right";
} else {
xDirection = "left";
}
//deal with the vertical case
if (oldY < e.pageY) {
yDirection = "down";
} else {
yDirection = "up";
}
oldX = e.pageX;
oldY = e.pageY;
console.log(xDirection + " " + yDirection);
}
Mausrichtung 3 - jQuery Plugin
/**
* jQuery Mouse Direction Plugin
* @version: 1.1
* @author Hasin Hayder [hasin@leevio.com | http://hasin.me]
*/
(function ($) {
var options = {};
var oldx = 0;
var oldy = 0;
var direction="";
$.mousedirection = function (opts) {
var defaults = {
};
options = $.extend(defaults, opts);
$(document).bind("mousemove", function (e) {
var activeElement = e.target || e.srcElement;
if (e.pageX > oldx && e.pageY > oldy) {
direction="bottom-right";
}
else if (e.pageX > oldx && e.pageY < oldy) {
direction="top-right";
}
else if (e.pageX < oldx && e.pageY < oldy) {
direction="top-left";
}
else if (e.pageX < oldx && e.pageY > oldy) {
direction="bottom-left";
}
else if (e.pageX > oldx && e.pageY == oldy) {
direction="right";
}
else if (e.pageX == oldx && e.pageY > oldy) {
direction="down";
}
else if (e.pageX == oldx && e.pageY < oldy) {
direction="up";
}
else if (e.pageX < oldx && e.pageY == oldy) {
direction="left";
}
$(activeElement).trigger(direction);
$(activeElement).trigger({type:"mousedirection",direction:direction});
oldx=e.pageX;
oldy=e.pageY;
});
}
})(jQuery);
Beispiel
<!Doctype html>
<head>
<title>jQuery Mouse Direction Plugin Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.mousedirection.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.container {
height: 150px;
margin: 20px;
padding: 20px;
width: 300px;
border: 1px solid #888;
}
</style>
<body>
<div class="container">
Move your mouse over this box
</div>
<script type='text/javascript'>
$(function () {
$.mousedirection();
$(".container").bind("mousedirection", function (e) {
$(this).html("Mouse Direction: <b>"+e.direction+"</b>");
});
});
</script>
</body>
</html>
Mausrichtung 4 - in Grad
http://stackoverflow.com/questions/22977862/calculating-angle-in-degrees-of-mouse-movement (2017-01)
$("canvas").mousemove(function(e) {
getDirection(e);
if (!set) {
x1 = e.pageX, //set starting mouse x
y1 = e.pageY, //set starting mouse y
set = true;
}
clearTimeout(thread);
thread = setTimeout(callback.bind(this, e), 100);
});
function getAngle (x1, y1, x2, y2) {
var distY = Math.abs(y2-y1); //opposite
var distX = Math.abs(x2-x1); //adjacent
var dist = Math.sqrt((distY*distY)+(distX*distX)); //hypotenuse,
//don't know if there is a built in JS function to do the square of a number
var val = distY/dist;
var aSine = Math.asin(val);
return Math.degrees(aSine); //return angle in degrees
}
function callback(e) {
x2 = e.pageX; //new X
y2 = e.pageY; //new Y
log("ANGLE: " + getAngle(x1, y1, x2, y2));
log("mouse has stopped");
set = false;
}
Math.degrees = function(radians)
{
return radians*(180/Math.PI);
}
