Utilisez jQuery pour implémenter le masquage d'image, la chute semi-transparente occlusion_jquery

L'effet de disposition d'image en grille de neuf carrés par défaut Lorsque la souris survole l'image, un effet de masque translucide glisse vers le bas depuis le haut de l'image

Certaines introductions de texte apparaissent en même temps

Comment utiliser :

1. Introduisez le style CSS dans le head dans votre page web
2. Copiez la partie code à la fin du corps de votre page Web
(js et images utilisent des chemins absolus et les modifications ne sont pas recommandées)

Copier le code Le code est le suivant :

$(fonction(){
$('.sgw_img dt').hover(function(){
           $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},fonction(){
            $(this).children('.box').stop(true,true).animate({'top':-482,opacity:0},200);
})
$('.sgw_img dd').hover(function(){
           $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},fonction(){
            $(this).children('.box').stop(true,true).animate({'top':-382,opacity:0},200);
})
})

Ce qui précède est tout le contenu partagé dans cet article, j'espère que vous l'aimerez tous.