滑动门算法 

 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 });

 

posted @ 2016-01-18 09:45  goodpan  阅读(244)  评论(0)    收藏  举报