jquery_jquery に基づく方向画像グラデーション アニメーション効果

もう 1 つのポイントはフィルターの使用ですが、説明しなければならないことは、フィルターは認識されず、その効果は Firefox では表示されないということです。
コードを書き始めましょう
html は比較的単純です。 🎜>
コード

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

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

< META http-equiv=content-type content="text/html; charset=gb2312">

< li>img src="images/02.jpg" text="美しい海の景色|青い空と青い海" pic="2">

島
;

• ;/li>
  
• < ;div> 緑の葉を持つ木

大きな木

畑のひまわり

🎜>

ここに id=frontTextBack を持つ div タグが複数あります。 CSS フィルターについては何も言うことはありません
それでは CSS コードを書き始めましょう
まずトップレベルからコードを書き始めます

コードをコピーします


コードは次のとおりです。

body {padding:0; moz-user-select: none; :0; } #nav { 背景: url("loadsmall.gif") 繰り返しなしのスクロール 330px 100px #000; overflow:hidden; :relative; width:760px;

display:block;

left:3px; -align:left;
z-index:999;
#nav ul li {
display:block;
float:left; :50px;
フォントサイズ:12px;
}
#nav li img{ ボーダー:1px ソリッドホワイト; ;
float:left;
left:10px;
margin-top:10px; 🎜>#nav li div{ FILTER: alpha(opacity=60);
margin-left:70px;
padding-left:10px;
}
#frontTextBack{color:#000;
font-size:30px;
position:absolute;幅:100%;
トップ:22px;
#frontText { color:#fff;
フォントの太さ:900; 20px;
位置:絶対;
幅:100%;
#frontTextSub フォントサイズ:13px;
位置:絶対;
幅:100%;
#BG {背景:なしスクロール 0 0 #000;
ボーダートップ:1px ソリッド
高さ:50px; >幅:100%;
}
#マスク {背景:繰り返しスクロール 0 0 透明;
位置:絶対;
z-index:990;
}
#back { text-align:center;
}
.gray {FILTER:gray() } // フィルターをグレーに設定します


次のステップは js を書くことです
コード
最初にロードします




コードをコピーします


コードは次のとおりです以下のように:

$(function(){
//まずクリックする必要がある画像を見つけます
$("li img").click(function(){
//現在の画像はすでにクリックされています
if(this.className.indexOf("active") !=-1)
{
return;
}
//データを取得
var i = $(this).attr("pic");
//表示するテキストの内容を取得し、
var t=$(this).attr("text") でテキストを配列に分割します).split("|");
//透明度を制御してテキストのフェードアウトを変更します
$("#frontText").fadeOut(); ("#frontTextBack") .fadeOut();
$("#frontTextSub").fadeOut();
//現在アクティブな画像を処理し、元の状態に戻します
$("li img.active").animate({top: 5,width:52,left:10},300)
.removeClass("active")
.fadeTo(200,0.6)
//処理現在のアクティブな画像
$(this ).animate({top:-5,width:40,height:70,left:1},300)
.addClass("active")
.fadeTo (200,1)
// 表示されている div の大きな画像を処理します
$("#back").children().addClass("gray").end()
.fadeIn(500 ,0.1,function(){
$ (this).children("img").attr("src","imgaes/" i ".jpg").removeClass("gray"); (this).fadeTo(500,1,function (){
$("#frontText").html(t[0]).fadeIn(200); //テキストを変更します
$("# frontTextBack").html(t[0]) .fadeIn(200); //シャドウテキスト
$("#frontTextSub").html(t[1]).fadeIn(200)} //字幕
);
});
});
//最初の画像を初期化します
show(); (){
if (i= =$("li img").size()) i = 0
$("li img").eq(i).click(); ;
//setTimeout(show( ),1000);

声明：

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