快捷導(dǎo)航

基于CSS3和jQuery實(shí)現(xiàn)跟隨鼠標(biāo)方位的Hover特效

更新時(shí)間：2016年07月25日 09:13:24 作者：池月

這篇文章主要介紹了基于CSS3和jQuery實(shí)現(xiàn)跟隨鼠標(biāo)方位的Hover特效的相關(guān)資料,需要的朋友可以參考下

今天我們來(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)我們離開(kāi)元素時(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)畫(huà)。
我希望你可以喜歡這個(gè)小特效并覺(jué)得很有用！

如果瀏覽器不支持CSS過(guò)渡將會(huì)使用jQuery動(dòng)畫(huà)。

原地址和插件下載

以上所述是小編給大家介紹的基于CSS3和jQuery實(shí)現(xiàn)跟隨鼠標(biāo)方位的Hover特效，希望對(duì)大家有所幫助！

您可能感興趣的文章: