基于CSS3和jQuery實(shí)現(xiàn)跟隨鼠標(biāo)方位的Hover特效
今天我們來(lái)學(xué)習(xí)如何通過(guò)CSS3的特性和jQuery來(lái)創(chuàng)建一個(gè)感知鼠標(biāo)滑動(dòng)方向的hover效果。當(dāng)鼠標(biāo)滑進(jìn)的時(shí)候,遮罩層會(huì)從上次鼠標(biāo)滑出的方向滑入,當(dāng)鼠標(biāo)滑出的時(shí)候,遮罩層會(huì)跟隨鼠標(biāo),從鼠標(biāo)滑出的方向滑出。這是一個(gè)十分有趣的效果。
我們使用無(wú)序列表來(lái)組織縮略圖和描述遮罩層:
<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>
這些列表項(xiàng)將會(huì)向左浮動(dòng),并且相對(duì)定位,因?yàn)槲覀兘^對(duì)定位描述遮罩層:
.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%; }
接下來(lái)我們將這樣做:根據(jù)鼠標(biāo)進(jìn)入的位置,我們將“from”樣式應(yīng)用給遮罩層,它設(shè)置了遮罩層的初始位置。然后我們將使用過(guò)渡并將添加最終狀態(tài)的樣式。這樣遮罩層就滑入了。當(dāng)我們離開元素時(shí),我們?cè)俅螒?yīng)用“from”樣式給遮罩層(盡管現(xiàn)在實(shí)際上是滑出)并去除之前的最終狀態(tài)樣式。
嗯,以下就是這個(gè)小插件的核心:
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 ); } } );
我們主要是給列表項(xiàng)綁定‘mouseenter'和‘mouseleave'事件,通過(guò)_getDir函數(shù)我們獲得鼠標(biāo)滑進(jìn)或滑出的方向(想象檢測(cè)區(qū)域是個(gè)被分成四個(gè)三角形的矩形)。
你將會(huì)看到,在第二個(gè)demo中,我們添加了延遲,這樣當(dāng)鼠標(biāo)從一個(gè)角落移到另一個(gè)角落的時(shí)候不會(huì)發(fā)生太多的動(dòng)畫。
我希望你可以喜歡這個(gè)小特效并覺(jué)得很有用!
如果瀏覽器不支持CSS過(guò)渡將會(huì)使用jQuery動(dòng)畫。
以上所述是小編給大家介紹的基于CSS3和jQuery實(shí)現(xiàn)跟隨鼠標(biāo)方位的Hover特效,希望對(duì)大家有所幫助!
相關(guān)文章
passwordStrength 基于jquery的密碼強(qiáng)度檢測(cè)代碼使用介紹
我們?cè)O(shè)定密碼強(qiáng)度等級(jí)為10,制作一張圖片表示每個(gè)等級(jí)狀態(tài),給密碼框綁定keyup事件,通過(guò)keyup事件獲取密碼值,然后使用正則進(jìn)行判斷密碼強(qiáng)度等級(jí),然后變換相應(yīng)的圖片2011-10-10jquery實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè)
這篇文章主要介紹了基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè),功能實(shí)現(xiàn)了前端排序功能,增加了前端搜索功能,感興趣的小伙伴們可以參考一下2016-01-01Jquery原生態(tài)實(shí)現(xiàn)表格header頭隨滾動(dòng)條滾動(dòng)而滾動(dòng)
表頭是浮動(dòng)的,因?yàn)閮?nèi)容在同一頁(yè)面展示,當(dāng)滾動(dòng)時(shí),看不到列頭,為了改動(dòng)少只能使用jquery原生態(tài)實(shí)現(xiàn)滾動(dòng)2014-03-03jQuery實(shí)現(xiàn)仿Alipay支付寶首頁(yè)全屏焦點(diǎn)圖切換特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿Alipay支付寶首頁(yè)全屏焦點(diǎn)圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關(guān)使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05jquery中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用
這篇文章主要介紹了jquery中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用,需要的朋友可以參考下2014-05-05jQuery實(shí)現(xiàn)的粘性滾動(dòng)導(dǎo)航欄效果實(shí)例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的粘性滾動(dòng)導(dǎo)航欄效果,涉及jQuery插件smint的相關(guān)使用技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下2017-10-10JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
這篇文章主要是對(duì)JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置的示例代碼進(jìn)行了介紹。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12jquery實(shí)現(xiàn)點(diǎn)擊展開列表同時(shí)隱藏其他列表
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊展開列表同時(shí)隱藏其他列表的方法,涉及jquery鼠標(biāo)事件及節(jié)點(diǎn)的遍歷與屬性操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08