CSS3 und jQuery implementieren Hover-Effekte, die der Mausrichtung folgen

In diesem Artikel werden hauptsächlich relevante Informationen zur Implementierung des Hover-Effekts vorgestellt, der der Mausrichtung basierend auf CSS3 und jQuery folgt. Freunde, die ihn benötigen, können darauf zurückgreifen

Heute lernen wir, wie man einen Hover-Effekt erstellt durch die Funktionen von CSS3 und jQuery Nehmen Sie den Hover-Effekt der Mausgleitrichtung wahr. Wenn die Maus hineingleitet, gleitet die Maskenebene aus der Richtung, in der die Maus zuletzt herausgleitet. Wenn die Maus herausgleitet, folgt die Maskenebene der Maus und gleitet aus der Richtung heraus, in der die Maus herausgleitet. Das ist ein sehr interessanter Effekt.
Wir verwenden eine ungeordnete Liste, um Miniaturansichten und Beschreibungsmaskenebenen zu organisieren:

<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>

Diese Listenelemente werden nach links verschoben und relativ positioniert, weil wir Beschreiben Sie die Maskenebene mit absoluter Positionierung:

.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%;
}

Als nächstes machen wir Folgendes: Je nachdem, wohin die Maus eintritt, wenden wir den „Von“-Stil auf die Maske an Ebene Maskenebene, die die Anfangsposition der Maskenebene festlegt. Dann verwenden wir Übergänge und fügen Stile für den Endzustand hinzu. Auf diese Weise wird die Maskenebene hineingeschoben. Wenn wir das Element verlassen, wenden wir den „Von“-Stil erneut auf die Maskenebene an (obwohl er jetzt tatsächlich herausgleitet) und entfernen den vorherigen Endzustandsstil.

Nun, das Folgende ist der Kern dieses kleinen Plug-Ins:

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 );
}
} );

Wir binden hauptsächlich 'mouseenter' und ' Mit dem Ereignis „mouseleave“ erhalten wir über die Funktion _getDir die Richtung, in die die Maus hinein- oder herausgleitet (stellen Sie sich vor, der Erkennungsbereich ist ein Rechteck, das in vier Dreiecke unterteilt ist).

Sie werden sehen, dass wir in der zweiten Demo eine Verzögerung hinzugefügt haben, damit nicht viel Animation auftritt, wenn sich die Maus von Ecke zu Ecke bewegt.
Ich hoffe, Ihnen gefällt dieser kleine Spezialeffekt und Sie finden ihn nützlich!

Wenn der Browser keine CSS-Übergänge unterstützt, wird die jQuery-Animation verwendet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So implementieren Sie einen Schiebeknopfschalter mit jQuery

Wie bestimmt JavaScript, ob der Browser dies unterstützt? CSS3-Attribute? Unterstützung

Das obige ist der detaillierte Inhalt vonCSS3 und jQuery implementieren Hover-Effekte, die der Mausrichtung folgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!