javascript获取鼠标进入div的方向

来源：洛可可用户体验设计

该页面中有一个图片列表，在鼠标的mouseenter和mouseleave事件中会计算鼠标进入和移出时的方向，通过该方向值可以制作出用户体验更佳的效果。

其主要代码如下：

var moveFun = function() { //文字框移动
                var moveTime = 200;
                var moveIn = function(obj, direction) {
                    switch (direction) {
                        case 0:
                            obj.css({
                                "top": "-330px",
                                "left": "0"
                            });
                            break;
                        case 1:
                            obj.css({
                                "top": "0",
                                "left": "330px"

                            });
                            break;
                        case 2:
                            obj.css({
                                "top": "330px",
                                "left": "0"
                            });
                            break;
                        case 3:
                            obj.css({
                                "top": "0",
                                "left": "-330px"
                            });
                            break;
                    }
                    obj.stop().animate({
                        "top": "0",
                        "left": "0"
                    }, moveTime, 'easeOutSine');
                }
                var moveOut = function(obj, direction) {
                    switch (direction) {
                        case 0:
                            obj.stop().animate({
                                "top": "-330px",
                                "left": "0"
                            }, moveTime, 'easeOutSine');
                            break;
                        case 1:
                            obj.stop().animate({
                                "top": "0",
                                "left": "330px"
                            }, moveTime, 'easeOutSine');
                            break;
                        case 2:
                            obj.stop().animate({
                                "top": "330px",
                                "left": "0"
                            }, moveTime, 'easeOutSine');
                            break;
                        case 3:
                            obj.stop().animate({
                                "top": "0",
                                "left": "-330px"
                            }, moveTime, 'easeOutSine');
                            break;
                    }
                }

                $(".list-case li.item").bind("mouseenter mouseleave", function(e) {
                    var obj = $(this)
                    var objTxt = obj.find(".txt");
                    var w = obj.width();
                    var h = obj.height();

		//获取方向
                    var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
                    var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
                    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
                    var eventType = e.type;

                    if (e.type == 'mouseenter') {
                        moveIn(objTxt, direction);
                    } else {
                        moveOut(objTxt, direction);
                    }
                });