Css3和Jquery 鼠标悬浮图片效果

我们将使用一个无序列表缩略图和描述覆盖图:
<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
            <img src="images/7.jpg" />
            <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
        </a>
    </li>
    <li>
        <!-- ... -->
    </li>
    <!-- ... -->
</ul>
列表项将浮动左右有一个相对定位,因为我们将覆盖绝对描述:
.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%;
}
我们要做的是以下几点:根据我们正在进入的地方用鼠标,我们将运用各自的“从”风格,将正确的初始位置的叠加。然后我们将应用过渡,然后添加最后一个国家的风格,以便覆盖幻灯片。当我们离开元素时,我们将再次运用各自的“从”风格(尽管现在我们实际上是滑动)和删除前面的最终状态的风格。
所以,我们的小插件的核心是下列标准
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 );
         
    }
         
} );
　　我们基本上把‘mouseenter’和‘mouseleave’事件的列表项和function_getDir进出方向(想象一下每个方向的“检测”区域作为一个矩形分为四个三角形)。
　　你会发现在第二个演示我们出现了一点延迟,所以我们没有太多的动画发生当我们移动鼠标从一个极端到另一个角落。
　　我希望你喜欢这个小效果,觉得它有用!