1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| //采用模块模式来封装代码，可以方便发布成为spm包，方便今后引用。
var wen_direction = (function () {
var jqDirection;
function Direction(id) {
this.id = document.getElementById(id) || id ;
}
Direction.prototype.init = function (enterObj, leaveObj) {
//鼠标滑入元素
var self = this;
this.id.addEventListener('mouseenter', function (e) {
var directionNumber = self.main(e); //返回数字 返回0:上方进入， 返回1:右方进入，返回2：下方进入，返回3：左方进入
var funArray = [enterObj.top, enterObj.right, enterObj.bottom, enterObj.left];
funArray[directionNumber](self.id);
},false);
this.id.addEventListener('mouseleave', function (e) {
var directionNumber = self.main(e); //返回数字 返回0:上方离开， 返回1:右方离开，返回2：下方离开，返回3：左方离开
var funArray = [leaveObj.top, leaveObj.right, leaveObj.bottom, leaveObj.left];
funArray[directionNumber](self.id);
},false);
};
/*主函数 返回数字来判断从哪个方向进入*/
Direction.prototype.main = function (e) {
var w = this.id.scrollWidth;
var h = this.id.scrollHeight;
var x = (e.offsetX - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.offsetY - (h / 2)) * (h > w ? (w / h) : 1);
var number = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
return number;
};
/*基于jquery的事件对象*/
Direction.prototype.jqRun=function(e) {
var directionNumber = this.jqMain(e);
var obj = {};
switch(directionNumber)
{
case 0://from top
obj.left = 0;
obj.top = "-100%";
break;
case 1://from right
obj.left = "100%";
obj.top = 0;
break;
case 2://from bottom
obj.left = 0;
obj.top = "100%";
break;
case 3://from left
obj.left = "-100%";
obj.top = 0;
break;
}
return obj;
};
Direction.prototype.jqMain = function (e) {
var w = this.id.width();
var h = this.id.height();
/*计算x和y得到一个角到elem的中心，得到相对于x和y值到div的中心*/
var x = (e.pageX - this.id.offset().left - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.id.offset().top - (h / 2)) * (h > w ? (w / h) : 1);
/** 鼠标从哪里来 / 角度 和 方向出去顺时针（得出的结果是TRBL 0 1 2 3
* 首先计算点的角度，
* 再加上180度摆脱负值
* 除于90得到的象限（象限，又称象限角，意思就是一个圆之四分之一等份）
* 加上3，做一个模（求模 求余数）4的象限转移到一个适当的顺时针 得出 TRBL 0 1 2 3（上/右/下/左）
**/
var number = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
return number;
};
return {
run: function (id, enterObj, leaveObj) {//这个接口用于原生js
var directionChild = new Direction(id);
directionChild.init(enterObj, leaveObj);
},
jqRun: function(id, e){//暴露的这个接口是基于jquery的
if(!jqDirection){
jqDirection = new Direction(id);
}
return jqDirection.jqRun(e);//返回一个样式对象{left：string，top：string}
}
}
})();
//测试用例
var enterObject = {
left: function(self) {
self.innerHTML = "从左边进入";
console.log("从左边进入");
},
right: function(self) {
self.innerHTML = "从右边进入";
console.log("从右边进入");
},
top: function(self) {
self.innerHTML = "从上边进入";
console.log("从上边进入");
},
bottom: function(self) {
self.innerHTML = "从下边进入";
console.log("从下边进入");
}
};
var leaveObject = {
left: function(self) {
self.innerHTML = "从左边离开";
console.log("从左边离开");
},
right: function(self) {
self.innerHTML = "从右边离开";
console.log("从右边离开");
},
top: function(self) {
self.innerHTML = "从上边离开";
console.log("从上边离开");
},
bottom: function(self) {
self.innerHTML = "从下边离开";
console.log("从下边离开");
}
};
//run接口
wen_direction.run('box',enterObject, leaveObject);
//jqRun接口
var jqbox = $("#jqbox");
var hidden = jqbox.children("#hidden");
jqbox.hover(function(e) {
hidden.css(wen_direction.jqRun(jqbox,e)).stop(true,true).animate({left: '0', top: '0'},200);
},function(e) {
hidden.stop(true, true).animate(wen_direction.jqRun(jqbox,e), 200);
});
|