1 // 非原创，来自demo:http://yuanoook.com/file?hash=579d738296490b2f9375ee15c547cd07
2 // http://www.w3cfuns.com
3 // http://cdn.res.w3cfuns.com/js/common/global.js
4
5 $(function(){
6 $('[hover-slideout]').each(function(){
7 $(this).hover(function(e){
8 $(this).find('[smelly-cat]').css(induction_position($(this), e)).stop(true, true).animate({"left":0, "top":0}, 200);
9 },function(e){
10 $(this).find('[smelly-cat]').stop(true, true).animate(induction_position($(this), e), 200);
11 });
12 });
13
14 //鼠标进入方向
15 function induction_position(elem, e){
16 var w = elem.width(), h = elem.height(), direction=0, obj={};
17 /** 计算x和y得到一个角到elem的中心，得到相对于x和y值到div的中心 **/
18 var x = (e.pageX - elem.offset().left - (w / 2)) * (w > h ? (h / w) : 1);
19 var y = (e.pageY - elem.offset().top - (h / 2)) * (h > w ? (w / h) : 1);
20
21 /** 鼠标从哪里来 / 角度 和 方向出去顺时针（得出的结果是TRBL 0 1 2 3） **/
22 /**
23 * 首先计算点的角度，
24 * 再加上180度摆脱负值
25 * 90初,一得到的象限（象限，又称象限角，意思就是一个圆之四分之一等份）
26 * 加上3，做一个模（求模 求余数）4的象限转移到一个适当的顺时针 得出 TRBL 0 1 2 3（上/右/下/左）
27 */
28 direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
29
30 switch(direction)
31 {
32 case 0://from top
33 obj.left = 0;
34 obj.top = "-100%";
35 break;
36 case 1://from right
37 obj.left = "100%";
38 obj.top = 0;
39 break;
40 case 2://from bottom
41 obj.left = 0;
42 obj.top = "100%";
43 break;
44 case 3://from left
45 obj.left = "-100%";
46 obj.top = 0;
47 break;
48 }
49 return obj;
50 }
51 });
