jQuery を使用して画像マスキング、半透明の落下オクルージョンを実装する_jquery

デフォルトの 9 正方形グリッドの画像配置効果。マウスを画像の上に置くと、半透明のマスク効果が画像の上からスライドします。

いくつかのテキスト紹介が同時に表示されます

使用方法:

1. Web ページに head 内の CSS スタイルを導入します
2. コード部分を Web ページの本文の最後にコピーします
(js と画像は絶対パスを使用するため、変更は推奨されません)

コードをコピーします コードは次のとおりです:

$(関数(){
$('.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);
})
})

上記はこの記事で共有されたすべての内容です。皆さんに気に入っていただければ幸いです。