1 /**
  2  * jquery.hoverdir.js v1.1.0
  3  * http://www.codrops.com
  4  *
  5  * Licensed under the MIT license.
  6  * http://www.opensource.org/licenses/mit-license.php
  7  *
  8  * Copyright 2012, Codrops
  9  * http://www.codrops.com
 10  */
 11 ;( function( $, window, undefined ) {
 12     'use strict';
 13     $.HoverDir = function( options, element ) {
 14         this.$el = $( element ); // li元素
 15         this._init( options );
 16     };
 17     // the options
 18     $.HoverDir.defaults = {
 19         speed : 300,
 20         easing : 'ease',
 21         hoverDelay : 0,
 22         inverse : false
 23     };
 24     $.HoverDir.prototype = {
 25         _init : function( options ) {
 26             /*
 27             初期化
 28             1.参数获取
 29             2.css3 transition 设定
 30             3.是否支持css3 transition判定
 31             4.事件绑定
 32             */
 33             // options
 34             this.options = $.extend( true, {}, $.HoverDir.defaults, options );
 35             // transition properties
 36             this.transitionProp = 'all ' + this.options.speed + 'ms ' + this.options.easing;
 37             // support for CSS transitions
 38             this.support = Modernizr.csstransitions;
 39             // load the events
 40             this._loadEvents();
 41         },
 42         _loadEvents : function() {
 43             /*参照博文3.JS*/
 44             var self = this;
 45             this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
 46                 var $el = $( this ),
 47                     $hoverElem = $el.find( 'div' ),
 48                     direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
 49                     styleCSS = self._getStyle( direction );
 50                 if( event.type === 'mouseenter' ) {
 51                     $hoverElem.hide().css( styleCSS.from );
 52                     clearTimeout( self.tmhover );
 53                     self.tmhover = setTimeout( function() {
 54                         $hoverElem.show( 0, function() {
 55                             var $el = $( this );
 56                             if( self.support ) {
 57                                 $el.css( 'transition', self.transitionProp );
 58                             }
 59                             self._applyAnimation( $el, styleCSS.to, self.options.speed );
 60                         } );
 61
 62                     }, self.options.hoverDelay );
 63                 }
 64                 else {
 65                     if( self.support ) {
 66                         $hoverElem.css( 'transition', self.transitionProp );
 67                     }
 68                     clearTimeout( self.tmhover );
 69                     self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
 70                 }
 71             } );
 72         },
 73         // credits : http://stackoverflow.com/a/3647634
 74         _getDir : function( $el, coordinates ) {
 75             /*返回鼠标事件的当前相对方位(上右下左=0123)*/
 76             // the width and height of the current div
 77             var w = $el.width(),
 78                 h = $el.height(),
 79                 // calculate the x and y to get an angle to the center of the div from that x and y.
 80                 //根据鼠标位置x,y计算角度
 81                 // gets the x value relative to the center of the DIV and "normalize" it
 82                 /*
 83                     通过鼠标移动事件发生的页面坐标x，y，计算出以div中心为原点的x,y坐标
 84                     计算关联到div偏移位置，div长宽度以及长宽比
 85                 */
 86                 x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
 87                 y = ( coordinates.y - $el.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
 88                 // the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);
 89                 // first calculate the angle of the point,
 90                 // add 180 deg to get rid of the negative values
 91                 // divide by 90 to get the quadrant
 92                 // add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
 93                 /*
 94                     Math.atan2(y, x)：所表达的意思是坐标原点为起点，指向(x,y)的射线在坐标平面上与x轴正方向之间的角的角度。
 95                     http://baike.baidu.com/link?url=PNCFllbtSbLmkZxWtADv9c27UuA4iUPNEkZtPmn0PItjGRcUqs_CfnkAV1I528bCG7-l2UT3EfUefP6S_RhFz_
 96                     1.计算与X轴的夹角角度
 97                     2.加180，变为正数
 98                     3.除90，分为4份
 99                     4.转为(上右下左=0123)的形式
100                 */
101                 direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4;
102             return direction;
103         },
104         _getStyle : function( direction ) {
105             /*返回移入的初期，最终位置；移出的最终位置*/
106             // js中定义初期位置，有的会直接在css中定义
107             var fromStyle, toStyle,
108                 slideFromTop = { left : '0px', top : '-100%' },
109                 slideFromBottom = { left : '0px', top : '100%' },
110                 slideFromLeft = { left : '-100%', top : '0px' },
111                 slideFromRight = { left : '100%', top : '0px' },
112                 slideTop = { top : '0px' },
113                 slideLeft = { left : '0px' };
114             /*direction(上右下左=0123)*/
115             switch( direction ) {
116                 case 0:
117                     // from top
118                     // 鼠标初期位置[移入初始位置，移除最终位置]this.options.inverse为反向判断
119                     fromStyle = !this.options.inverse ? slideFromTop : slideFromBottom;
120                     // 鼠标移入最终位置
121                     toStyle = slideTop;
122                     break;
123                 case 1:
124                     // from right
125                     fromStyle = !this.options.inverse ? slideFromRight : slideFromLeft;
126                     toStyle = slideLeft;
127                     break;
128                 case 2:
129                     // from bottom
130                     fromStyle = !this.options.inverse ? slideFromBottom : slideFromTop;
131                     toStyle = slideTop;
132                     break;
133                 case 3:
134                     // from left
135                     fromStyle = !this.options.inverse ? slideFromLeft : slideFromRight;
136                     toStyle = slideLeft;
137                     break;
138             };
139             return { from : fromStyle, to : toStyle };
140         },
141         // apply a transition or fallback to jquery animate based on Modernizr.csstransitions support
142         /*过度动画兼容方法*/
143         _applyAnimation : function( el, styleCSS, speed ) {
144             $.fn.applyStyle = this.support ? $.fn.css : $.fn.animate;
145             el.stop().applyStyle( styleCSS, $.extend( true, [], { duration : speed + 'ms' } ) );
146         },
147     };
148     var logError = function( message ) {
149         /*处理错误信息输出方法*/
150         if ( window.console ) {
151             window.console.error( message );
152         }
153     };
154     /*Jquery扩展方法*/
155     $.fn.hoverdir = function( options ) {
156         // 先获取该li的缓存中的hoverdir
157         var instance = $.data( this, 'hoverdir' );
158         if ( typeof options === 'string' ) {
159             /*参数为字符串类型时，好像目前用不到，暂时没有想到这段代码的目的*/
160             // 数组化参数
161             var args = Array.prototype.slice.call( arguments, 1 );
162             this.each(function() {
163                 if ( !instance ) {
164                     // 缓存中没有hoverdir数据，报错
165                     logError( "cannot call methods on hoverdir prior to initialization; " +
166                     "attempted to call method '" + options + "'" );
167                     return;
168                 }
169                 if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
170                     // instance[options]不是方法，或第一字符不是_
171                     logError( "no such method '" + options + "' for hoverdir instance" );
172                     return;
173                 }
174                 instance[ options ].apply( instance, args );
175             });
176         }
177         else {
178             /*参数不为字符串类型时，正常入口*/
179             this.each(function() {
180                 if ( instance ) {
181                     instance._init();
182                 }
183                 else {
184                     instance = $.data( this, 'hoverdir', new $.HoverDir( options, this ) );
185                 }
186             });
187         }
188         return instance;
189     };
190 } )( jQuery, window );// 闭包，jquery插件写法