Verwenden Sie jQuery, um Bildmaskierung und halbtransparente fallende occlusion_jquery zu implementieren

Der standardmäßige Bildanordnungseffekt mit neun Quadraten. Wenn Sie mit der Maus über das Bild fahren, gleitet ein durchscheinender Maskeneffekt vom oberen Rand des Bildes nach unten.

Einige Texteinleitungen erscheinen gleichzeitig

Anwendung:

1. Führen Sie den CSS-Stil im Kopf in Ihre Webseite ein
2. Kopieren Sie den Codeteil an das Ende des Hauptteils Ihrer Webseite
(js und Bilder verwenden absolute Pfade und Änderungen werden nicht empfohlen)

Code kopieren Der Code lautet wie folgt:

$(function(){
$('.sgw_img dt').hover(function(){
           $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},function(){
            $(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);
},function(){
            $(this).children('.box').stop(true,true).animate({'top':-382,opacity:0},200);
})
})

Das Obige ist der gesamte in diesem Artikel geteilte Inhalt. Ich hoffe, er gefällt euch allen.