ホームページ > 記事 > ウェブフロントエンド > CSS3 と jQuery は、マウスの方向に従うホバー効果を実装します。

CSS3 と jQuery は、マウスの方向に従うホバー効果を実装します。

不言オリジナル: 2018-06-25 16:26:222111ブラウズ

この記事では、CSS3 と jQuery をベースにしたマウスの方向に追従するホバー効果の実装に関する関連情報を主に紹介します。必要な方は参考にしてください。

今日は、CSS3 と jQuery の特性を使用して、マウスのスライド方向を感知するホバー効果。マウスがスライドインすると、マスクレイヤーは最後にマウスがスライドアウトした方向からスライドインし、マウスがスライドアウトすると、マスクレイヤーはマウスに追従してマウスがスライドアウトした方向からスライドアウトします。これは非常に興味深い効果です。
順序なしリストを使用してサムネイルを整理し、マスクレイヤーを説明します:

<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( &#39;mouseenter.hoverdir, mouseleave.hoverdir&#39;, function( event ) {
var $el = $( this ),
$hoverElem = $el.find( &#39;p&#39; ),
direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
styleCSS = self._getStyle( direction );
if( event.type === &#39;mouseenter&#39; ) {
$hoverElem.hide().css( styleCSS.from );
clearTimeout( self.tmhover );
self.tmhover = setTimeout( function() {
$hoverElem.show( 0, function() {
var $el = $( this );
if( self.support ) {
$el.css( &#39;transition&#39;, self.transitionProp );
}
self._applyAnimation( $el, styleCSS.to, self.options.speed );
} );
}, self.options.hoverDelay );
}
else {
if( self.support ) {
$hoverElem.css( &#39;transition&#39;, self.transitionProp );
}
clearTimeout( self.tmhover );
self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
}
} );

主に _getDir 関数を通じて 'mouseenter' および 'mouseleave' イベントをリスト項目にバインドします。インまたはアウト方向にスライドします (検出エリアを 4 つの三角形に分割された長方形として想像してください)。

2 番目のデモでは、マウスがある隅から別の隅に移動するときにあまりアニメーションが発生しないように遅延を追加していることがわかります。
この小さな特殊効果を気に入っていただき、役立つと思っていただければ幸いです。

ブラウザがCSSトランジションをサポートしていない場合は、jQueryアニメーションが使用されます。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS3 と jQuery は、マウスの方向に従うホバー効果を実装します。

関連記事