Bearbeiten von „JavaScript - Maus“

== 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>