JavaScript - Maus
Aus Wikizone
Version vom 19. Januar 2017, 17:17 Uhr von 37.49.32.84 (Diskussion) (Die Seite wurde neu angelegt: „== Mausrichtung - links oder rechts == var direction = "", oldx = 0, mousemovemethod = function (e) { if (e.pageX < oldx) { di…“)
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>
