jquery画像のシルエットフェイングラデーションeffect_jquery

私のバンドの数人の友人が、ちょっとしたラインナップ変更を行ったところです。ホームページの写真を変更する必要があります。ちょっとした交流ができたら面白いかもしれないと思いました。

この効果を実現する方法はたくさんあるかもしれませんが、これが頭に浮かんだので、それを採用しました。このアイデアは、背景画像としてアウトラインを作成し、グループ内で各バンド メンバーの 4 つの画像をすべてまったく同じサイズにすることです。これらの画像はデフォルトでは非表示になっています。次に、そのエリアの上に 4 つの絶対位置エリアがあり、これがトランジション エリアです。 jQuery では、ホバー イベントでこれらを使用して、対応する画像を徐々に表示します。

HTML
先ほども言いましたが、4 つの画像とその中に遷移領域を含む単なる div です。すべてに一意の ID と共通のクラス名があります。

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

< /div>

CSS
はクラス名 (位置スタイルなど) に続き、ID (特定の左位置の特殊なものを含む) でカバーされます。 。

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

#home-photos-box { float:左; 幅: 352px; 背景: url(../images/guys-allblack.png) パディング: 334px 0 0 0; }
#aller { left: 0; >#neil { 左: 25%; }
#aaron { 左: 75%; }
.home-roll-box { 位置: z-インデックス: 1000; 表示: ブロック; 高さ: 0; 幅: 25%; } }

jQuery
該当領域にマウスを置くと、画像のIDに対応してフェードアウトします。このときstop()を使用します。ここではアニメーションがキューに入れられないようにします。 fadeToggle() は、マウスの移動が速すぎるとフェードします。

コードをコピー コードは次のとおりです。 $(function() {

var name = "";

$(".home-roll-box").hover(function() {
name = $(this).attr("id");
$(" #image- " name).stop().show().animate({ opacity: 1 });
}, function() {
name = $(this).attr("id");
$("#image-" name).stop().animate({ opacity: 0 });
});


ダウンロードアドレス
http://www.jb51.net/jiaoben/24272.html

声明：

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