JavaScript - Maus - Versionsgeschichte

37.49.32.84 am 21. Januar 2017 um 11:07 Uhr

2017-01-21T11:07:22Z

37.49.32.84 am 19. Januar 2017 um 16:25 Uhr

2017-01-19T16:25:36Z

37.49.32.84: /* Mausrichtung 3 - jQuery Plugin */

2017-01-19T16:24:58Z

Mausrichtung 3 - jQuery Plugin

37.49.32.84: /* Mausrichtung 3 - jQuery Plugin */

2017-01-19T16:23:58Z

Mausrichtung 3 - jQuery Plugin

37.49.32.84: /* Mausrichtung - links oder rechts */

2017-01-19T16:18:02Z

Mausrichtung - links oder rechts

37.49.32.84: Die Seite wurde neu angelegt: „== Mausrichtung - links oder rechts == var direction = "", oldx = 0, mousemovemethod = function (e) { if (e.pageX < oldx) { di…“

2017-01-19T16:17:46Z

Die Seite wurde neu angelegt: „== Mausrichtung - links oder rechts == var direction = "", oldx = 0, mousemovemethod = function (e) { if (e.pageX < oldx) { di…“

Neue Seite

== 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 ==
<pre>
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);
}
</pre>
==Mausrichtung 3 - jQuery Plugin==
<pre>
/**
* 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);
</pre>
Beispiel
<pre>
<!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>
</pre>

@@ Zeile 1: / Zeile 1: @@
 == Mausrichtung ==
 === Mausrichtung - links oder rechts ===
-<pre>
+<syntaxhighlight lang="javascript">
 var direction = "",
      oldx = 0,
@@ Zeile 19: / Zeile 46: @@
 document.addEventListener('mousemove', mousemovemethod);
-</pre>
+</syntaxhighlight>
 === Mausrichtung 2 ===
-<pre>
+<syntaxhighlight lang="javascript">
 var bodyElement = document.querySelector("body");
 bodyElement.addEventListener("mousemove", getMouseDirection, false);
@@ Zeile 52: / Zeile 79: @@
      console.log(xDirection + " " + yDirection);
+}
-</pre>
+</syntaxhighlight>
 === Mausrichtung 3 - jQuery Plugin ===
-<pre>
+<syntaxhighlight lang="javascript">
 /**
   * jQuery Mouse Direction Plugin
@@ Zeile 102: / Zeile 129: @@
+     }
 })(jQuery);
-</pre>
+</syntaxhighlight>
 Beispiel
-<pre>
+<syntaxhighlight lang="html5">
 <!Doctype html>
 <head>
@@ Zeile 134: / Zeile 161: @@
 </body>
 </html>
-</pre>
+</syntaxhighlight>
 === Mausrichtung 4 - in Grad ===
 http://stackoverflow.com/questions/22977862/calculating-angle-in-degrees-of-mouse-movement (2017-01)
-<pre>
+<syntaxhighlight lang="javascript">
 $("canvas").mousemove(function(e) {
              getDirection(e);
@@ Zeile 173: / Zeile 200: @@
    return radians*(180/Math.PI);
+}
-</pre>
+</syntaxhighlight>

@@ Zeile 52: / Zeile 52: @@
+}
 </pre>
-==Mausrichtung 3 - jQuery Plugin==
+===Mausrichtung 3 - jQuery Plugin===
 <pre>
 /**
@@ Zeile 135: / Zeile 135: @@
 </pre>
-Mausrichtung 4 - in Grad
+=== Mausrichtung 4 - in Grad ===
 http://stackoverflow.com/questions/22977862/calculating-angle-in-degrees-of-mouse-movement (2017-01)
 <pre>

@@ Zeile 133: / Zeile 133: @@
 </body>
 </html>
 </pre>