ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery を使用して画像マスキング、半透明の落下オクルージョンを実装する_jquery

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

WBOY
WBOYオリジナル
2016-05-16 16:08:551234ブラウズ

デフォルトの 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);
})
})

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。