CSS3 et jQuery implémentent des effets de survol qui suivent la direction de la souris

Cet article présente principalement les informations pertinentes sur la mise en œuvre de l'effet Hover qui suit la direction de la souris basée sur CSS3 et jQuery. Les amis qui en ont besoin peuvent s'y référer

Aujourd'hui, nous allons apprendre à créer un effet Hover. grâce aux fonctionnalités de CSS3 et jQuery. Percevez l'effet de survol de la direction de glissement de la souris. Lorsque la souris glisse vers l'intérieur, le calque de masque glissera dans la direction du dernier glissement de la souris. Lorsque la souris glissera vers l'extérieur, le calque de masque suivra la souris et glissera vers l'extérieur dans la direction du glissement de la souris. C'est un effet très intéressant.
Nous utilisons une liste non ordonnée pour organiser les vignettes et les calques de masque de description :

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

Ces éléments de liste flotteront vers la gauche et le positionnement relatif, car nous positionnons absolument le calque du masque de description :

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

Ensuite, nous ferons ceci : En fonction de l'endroit où va la souris, nous "depuis " Le style est appliqué au calque de masque, qui définit la position initiale du calque de masque. Ensuite, nous allons utiliser des transitions et ajouter des styles pour l'état final. De cette façon, le calque de masque glissera. Lorsque nous quittons l'élément, nous appliquons à nouveau le style "de" au calque de masque (bien que maintenant il glisse) et supprimons le style d'état final précédent.

Eh bien, ce qui suit est le cœur de ce petit plug-in :

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

Nous lions principalement le 'mouseenter 'aux éléments de la liste' et aux événements 'mouseleave', grâce à la fonction _getDir, nous obtenons la direction dans laquelle la souris glisse vers l'intérieur ou vers l'extérieur (imaginez que la zone de détection est un rectangle divisé en quatre triangles).

Vous verrez que dans la deuxième démo, nous avons ajouté un délai pour qu'il n'y ait pas beaucoup d'animation lorsque la souris se déplace d'un coin à l'autre.
J'espère que ce petit effet spécial vous plaira et qu'il vous sera utile !

Si le navigateur ne prend pas en charge les transitions CSS, l'animation jQuery sera utilisée.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter un commutateur à bouton coulissant avec jQuery

Comment JavaScript détermine-t-il si le navigateur prend en charge Attributs CSS3 ? Prise en charge

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!