[读码][js,css3]能感知鼠标方向的图片遮罩效果

效果图：

无意间看到过去流行的一个效果：[能感知鼠标方向的图片遮罩效果]
近来不忙，就仔细的看了一看
看到后来发现，网上有好多版本，谁是原著者似乎已经无法考证。
读码就要读比较全面的，读像是原著的代码。
代码随然不难，不过要能想到这个创意，并成功应用却很难！

另外，对于初学者，这也是不错的学习例子。
含Jquery插件写法，css3等

英文教程：http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/
源码下载：http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/DirectionAwareHoverEffect.zip

先大致翻译一下，再细看加点东西：

效果：在缩略图上遮盖一个图层，能够根据鼠标进入的方向遮盖缩略图，当鼠标离开时，该图层也会跟着鼠标方向离开。这个会是一个有趣的效果。

实现方法：
1.HTML 我们放置一个无序的li列表，存放缩略图以及遮盖层

 <ul id="da-thumbs" class="da-thumbs">
 <li>
 <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
 <img src="data:images/7.jpg" />
 <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
 </a>
 </li>
 <li>
 <!-- ... -->
 </li>
 <!-- ... -->
 </ul>

2.CSS 该列表使用左浮动样式，并定义使用相对位置，这样可以对遮盖层[描述层]使用决定位置定位

关于css定位：http://www.divcss5.com/rumen/r403.shtml

 .da-thumbs li {
 float: left;
 margin: 5px;
 background: #fff;
 padding: 8px;
 position: relative;
 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 .da-thumbs li a,
 .da-thumbs li a img {
 display: block;
 position: relative;
 }
 .da-thumbs li a {
 overflow: hidden;
 }
 .da-thumbs li a div {
 position: absolute;
 background: rgba(75,75,75,0.7);
 width: 100%;
 height: 100%;
 }

3.JS 后面要做的是：

先根据鼠标进入的位置，我们可以给遮盖层赋予计算出来的from样式[遮盖层初期位置]
再使用[css3 transition]进行属性变化的过度，时遮盖层达到最终状态
最后当鼠标离开时，鼠标移出事件中计算得到的from样式移出遮盖层位置，并移除上次的最终状态
下面是JQuery小插件核心代码：

 /*
 鼠标移入，移出事件监听
 监听的事件加入了命名空间，便于该事件的管理
 最好在on方法前使用off方法解除其他代码中对该命名空间事件可能的绑定
 */
 this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
 /*定义变量，存储遮盖层，计算得到的方向，计算得到的样式*/
 var $el = $( this ),
 $hoverElem = $el.find( 'div' ),
 direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
 styleCSS = self._getStyle( direction );
 if( event.type === 'mouseenter' ) {
 /*
 鼠标移入时
 隐藏遮盖层
 赋予初始位置
 清除延迟动画计时器
 显示遮盖层后
 如果支持css3 transition
 赋予transition属性
 使用延迟动画计时器进行动画效果[_applyAnimation方法]
 如果支持css3 transition，则只做样式变更
 否则，使用动画方法animate,实现过度效果
 */
 $hoverElem.hide().css( styleCSS.from );
 clearTimeout( self.tmhover );
 self.tmhover = setTimeout( function() {
 $hoverElem.show( 0, function() {
 var $el = $( this );
 if( self.support ) {
 $el.css( 'transition', self.transitionProp );
 }
 self._applyAnimation( $el, styleCSS.to, self.options.speed );
 } );
 }, self.options.hoverDelay );
 }
 else {
 /*
 鼠标移出时
 如果支持css3 transition
 赋予transition属性
 清除延迟动画计时器
 使用延迟动画计时器进行动画效果[_applyAnimation方法]
 */
 if( self.support ) {
 $hoverElem.css( 'transition', self.transitionProp );
 }
 clearTimeout( self.tmhover );
 self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
 }
 } );

4.JS JS全部代码加，追加注释说明

 /**
  * jquery.hoverdir.js v1.1.0
  * http://www.codrops.com
  *
  * Licensed under the MIT license.
  * http://www.opensource.org/licenses/mit-license.php
  *
  * Copyright 2012, Codrops
  * http://www.codrops.com
  */
 ;( function( $, window, undefined ) {
     'use strict';
     $.HoverDir = function( options, element ) {
         this.$el = $( element ); // li元素
         this._init( options );
     };
     // the options
     $.HoverDir.defaults = {
         speed : 300,
         easing : 'ease',
         hoverDelay : 0,
         inverse : false
     };
     $.HoverDir.prototype = {
         _init : function( options ) {
             /*
             初期化
             1.参数获取
             2.css3 transition 设定
             3.是否支持css3 transition判定
             4.事件绑定
             */
             // options
             this.options = $.extend( true, {}, $.HoverDir.defaults, options );
             // transition properties
             this.transitionProp = 'all ' + this.options.speed + 'ms ' + this.options.easing;
             // support for CSS transitions
             this.support = Modernizr.csstransitions;
             // load the events
             this._loadEvents();
         },
         _loadEvents : function() {
             /*参照博文3.JS*/
             var self = this;
             this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
                 var $el = $( this ),
                     $hoverElem = $el.find( 'div' ),
                     direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
                     styleCSS = self._getStyle( direction );
                 if( event.type === 'mouseenter' ) {
                     $hoverElem.hide().css( styleCSS.from );
                     clearTimeout( self.tmhover );
                     self.tmhover = setTimeout( function() {
                         $hoverElem.show( 0, function() {
                             var $el = $( this );
                             if( self.support ) {
                                 $el.css( 'transition', self.transitionProp );
                             }
                             self._applyAnimation( $el, styleCSS.to, self.options.speed );
                         } );

                     }, self.options.hoverDelay );
                 }
                 else {
                     if( self.support ) {
                         $hoverElem.css( 'transition', self.transitionProp );
                     }
                     clearTimeout( self.tmhover );
                     self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
                 }
             } );
         },
         // credits : http://stackoverflow.com/a/3647634
         _getDir : function( $el, coordinates ) {
             /*返回鼠标事件的当前相对方位(上右下左=0123)*/
             // the width and height of the current div
             var w = $el.width(),
                 h = $el.height(),
                 // calculate the x and y to get an angle to the center of the div from that x and y.
                 //根据鼠标位置x,y计算角度
                 // gets the x value relative to the center of the DIV and "normalize" it
                 /*
                     通过鼠标移动事件发生的页面坐标x，y，计算出以div中心为原点的x,y坐标
                     计算关联到div偏移位置，div长宽度以及长宽比
                 */
                 x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
                 y = ( coordinates.y - $el.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
                 // the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);
                 // first calculate the angle of the point,
                 // add 180 deg to get rid of the negative values
                 // divide by 90 to get the quadrant
                 // add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
                 /*
                     Math.atan2(y, x)：所表达的意思是坐标原点为起点，指向(x,y)的射线在坐标平面上与x轴正方向之间的角的角度。
                     http://baike.baidu.com/link?url=PNCFllbtSbLmkZxWtADv9c27UuA4iUPNEkZtPmn0PItjGRcUqs_CfnkAV1I528bCG7-l2UT3EfUefP6S_RhFz_
                     1.计算与X轴的夹角角度
                     2.加180，变为正数
                     3.除90，分为4份
                     4.转为(上右下左=0123)的形式
                 */
                 direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4;
             return direction;
         },
         _getStyle : function( direction ) {
             /*返回移入的初期，最终位置；移出的最终位置*/
             // js中定义初期位置，有的会直接在css中定义
             var fromStyle, toStyle,
                 slideFromTop = { left : '0px', top : '-100%' },
                 slideFromBottom = { left : '0px', top : '100%' },
                 slideFromLeft = { left : '-100%', top : '0px' },
                 slideFromRight = { left : '100%', top : '0px' },
                 slideTop = { top : '0px' },
                 slideLeft = { left : '0px' };
             /*direction(上右下左=0123)*/
             switch( direction ) {
                 case 0:
                     // from top
                     // 鼠标初期位置[移入初始位置，移除最终位置]this.options.inverse为反向判断
                     fromStyle = !this.options.inverse ? slideFromTop : slideFromBottom;
                     // 鼠标移入最终位置
                     toStyle = slideTop;
                     break;
                 case 1:
                     // from right
                     fromStyle = !this.options.inverse ? slideFromRight : slideFromLeft;
                     toStyle = slideLeft;
                     break;
                 case 2:
                     // from bottom
                     fromStyle = !this.options.inverse ? slideFromBottom : slideFromTop;
                     toStyle = slideTop;
                     break;
                 case 3:
                     // from left
                     fromStyle = !this.options.inverse ? slideFromLeft : slideFromRight;
                     toStyle = slideLeft;
                     break;
             };
             return { from : fromStyle, to : toStyle };
         },
         // apply a transition or fallback to jquery animate based on Modernizr.csstransitions support
         /*过度动画兼容方法*/
         _applyAnimation : function( el, styleCSS, speed ) {
             $.fn.applyStyle = this.support ? $.fn.css : $.fn.animate;
             el.stop().applyStyle( styleCSS, $.extend( true, [], { duration : speed + 'ms' } ) );
         },
     };
     var logError = function( message ) {
         /*处理错误信息输出方法*/
         if ( window.console ) {
             window.console.error( message );
         }
     };
     /*Jquery扩展方法*/
     $.fn.hoverdir = function( options ) {
         // 先获取该li的缓存中的hoverdir
         var instance = $.data( this, 'hoverdir' );
         if ( typeof options === 'string' ) {
             /*参数为字符串类型时，好像目前用不到，暂时没有想到这段代码的目的*/
             // 数组化参数
             var args = Array.prototype.slice.call( arguments, 1 );
             this.each(function() {
                 if ( !instance ) {
                     // 缓存中没有hoverdir数据，报错
                     logError( "cannot call methods on hoverdir prior to initialization; " +
                     "attempted to call method '" + options + "'" );
                     return;
                 }
                 if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                     // instance[options]不是方法，或第一字符不是_
                     logError( "no such method '" + options + "' for hoverdir instance" );
                     return;
                 }
                 instance[ options ].apply( instance, args );
             });
         }
         else {
             /*参数不为字符串类型时，正常入口*/
             this.each(function() {
                 if ( instance ) {
                     instance._init();
                 }
                 else {
                     instance = $.data( this, 'hoverdir', new $.HoverDir( options, this ) );
                 }
             });
         }
         return instance;
     };
 } )( jQuery, window );// 闭包，jquery插件写法

5.CSS3

transition: property duration timing-function delay;

CSS3过渡,定义应用过渡效果的 CSS 属性名称列表以逗号分隔。

6.HTML 调用

$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );
});

7.我们对列表的li绑定了‘mouseenter’ 和 ‘mouseleave’事件，

_getDir方法会判断鼠标是从哪4个方向移入或移出。
源码文件里还有
类型2[做了一点点延迟过度动画处理],
类型3[做了反向动画处理]
另外，如果浏览器不支持css3，将会使用animate方法处理过度动画

8.该插件读码完了，非常简单，适合初学者学习参考。
参考借鉴后，综合应用，做一个属于自己的Jquery特效插件。