CSS3和jQuery實現跟隨滑鼠方位的Hover特效

這篇文章主要介紹了基於CSS3和jQuery實現跟隨滑鼠方位的Hover特效的相關資料,需要的朋友可以參考下

今天我們來學習如何通過CSS3的特性和jQuery來建立一個感知滑鼠滑動方向的hover效果。當滑鼠滑進的時候，遮罩層會從上次滑鼠滑出的方向滑入，當滑鼠滑出的時候，遮罩層會跟隨滑鼠，從滑鼠滑出的方向滑出。這是一個十分有趣的效果。
我們使用無序列表來組織縮圖和描述遮罩層：

<ul id="da-thumbs" class="da-thumbs"><li><a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning"><img src="images/7.jpg" /><p><span>Natalie & Justin Cleaning by Justin Younger</span></p></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 p {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( 'p' ),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動畫。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！