今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑出。这是一个十分有趣的效果。
我们使用无序列表来组织缩略图和描述遮罩层:
<ul id="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%; }
接下来我们将这样做:根据鼠标进入的位置,我们将“from”样式应用给遮罩层,它设置了遮罩层的初始位置。然后我们将使用过渡并将添加最终状态的样式。这样遮罩层就滑入了。当我们离开元素时,我们再次应用“from”样式给遮罩层(尽管现在实际上是滑出)并去除之前的最终状态样式。
嗯,以下就是这个小插件的核心:
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'事件,通过_getDir函数我们获得鼠标滑进或滑出的方向(想象检测区域是个被分成四个三角形的矩形)。
你将会看到,在第二个demo中,我们添加了延迟,这样当鼠标从一个角落移到另一个角落的时候不会发生太多的动画。
我希望你可以喜欢这个小特效并觉得很有用!
如果浏览器不支持CSS过渡将会使用jQuery动画。
原地址和插件下载
以上所述是小编给大家介绍的基于CSS3和jQuery实现跟随鼠标方位的Hover特效,希望对大家有所帮助!