基于CSS3和jQuery實現(xiàn)跟隨鼠標方位的Hover特效
今天我們來學習如何通過CSS3的特性和jQuery來創(chuàng)建一個感知鼠標滑動方向的hover效果。當鼠標滑進的時候,遮罩層會從上次鼠標滑出的方向滑入,當鼠標滑出的時候,遮罩層會跟隨鼠標,從鼠標滑出的方向滑出。這是一個十分有趣的效果。
我們使用無序列表來組織縮略圖和描述遮罩層:
<ul id="da-thumbs" class="da-thumbs"> <li> <a > <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%; }
接下來我們將這樣做:根據(jù)鼠標進入的位置,我們將“from”樣式應用給遮罩層,它設置了遮罩層的初始位置。然后我們將使用過渡并將添加最終狀態(tài)的樣式。這樣遮罩層就滑入了。當我們離開元素時,我們再次應用“from”樣式給遮罩層(盡管現(xiàn)在實際上是滑出)并去除之前的最終狀態(tài)樣式。
嗯,以下就是這個小插件的核心:
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函數(shù)我們獲得鼠標滑進或滑出的方向(想象檢測區(qū)域是個被分成四個三角形的矩形)。
你將會看到,在第二個demo中,我們添加了延遲,這樣當鼠標從一個角落移到另一個角落的時候不會發(fā)生太多的動畫。
我希望你可以喜歡這個小特效并覺得很有用!
如果瀏覽器不支持CSS過渡將會使用jQuery動畫。
以上所述是小編給大家介紹的基于CSS3和jQuery實現(xiàn)跟隨鼠標方位的Hover特效,希望對大家有所幫助!
相關文章
passwordStrength 基于jquery的密碼強度檢測代碼使用介紹
我們設定密碼強度等級為10,制作一張圖片表示每個等級狀態(tài),給密碼框綁定keyup事件,通過keyup事件獲取密碼值,然后使用正則進行判斷密碼強度等級,然后變換相應的圖片2011-10-10Jquery原生態(tài)實現(xiàn)表格header頭隨滾動條滾動而滾動
表頭是浮動的,因為內容在同一頁面展示,當滾動時,看不到列頭,為了改動少只能使用jquery原生態(tài)實現(xiàn)滾動2014-03-03jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效
這篇文章主要介紹了jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關使用技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05jQuery實現(xiàn)的粘性滾動導航欄效果實例【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的粘性滾動導航欄效果,涉及jQuery插件smint的相關使用技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下2017-10-10JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
這篇文章主要是對JS和JQUERY獲取頁面大小,滾動條位置,元素位置的示例代碼進行了介紹。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12