本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3与jQuery创建方向感知的hover特效

本文介绍如何使用CSS 3与jQuery创建一个方向感知的hover特效。本文示例页面中显示一些缩略图,当鼠标指针进入缩略图中时,在缩略图中将从鼠标指针进入方向同步滑入一个“遮罩”Div元素,在其中显示一些图片说明文字。当鼠标指针从缩略图上移开时,将该“遮罩”Div元素从鼠标指针移开方向滑出。这将创建一个十分有趣的特效。

示例运行结果

HTML代码

本示例的HTML代码非常简单,我们将缩略图及“遮罩”Div元素均放在一个ul无序列表中。

<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="#">
            <img src="images/1.jpg" />
            <div><span>图片说明文字一</span></div>
        </a>
    </li>
    <li>
        <!-- ... -->
    </li>
    <!-- ... -->
</ul>

CSS 3样式代码

本示例中所使用的CSS 3样式代码如下所示:

.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%;
}

jQuery脚本代码

完成本示例的关键在于jQuery脚本代码部分,我们将根据鼠标指针进入缩略图的方向来滑入(使用一个CSS3 transition动画)“遮罩”Div元素。当鼠标指针离开缩略图时,我们将再次根据鼠标指针移开方向滑出(同样使用一个CSS3 transition动画)“遮罩”Div元素。

我们将使用一个自制插件来实现这一功能,其中的核心代码如下所示:

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

在这段代码中,我们监听li列表项元素的mouseenter事件与mouseleave事件,通过_getDir方法,我们得到鼠标指针进入或离开缩略图时的方向。