JQuery を使用して win8 と同じクールな動的タイル効果を実現する (サンプルコード)

私は個人的に、製品が成熟しているかどうかに関係なく、まったく新しい製品を提供する Microsoft の新世代の製品がとても好きです。いわゆる「真新しい」とは、近年の Apple の成功により、Android を含むすべての製品がそのインターフェースを模倣するようになったということです。とにかく、このような丸い長方形にはうんざりしています。 Apple と Android の皆さん、文句を言わないでください。これはインターフェイスの単なる評価です。実際、全体的には Microsoft にはまだ差があります)。wp の登場で私の目は輝き、すぐに Metro スタイルの虜になりました。現在、wp8 と win8 はますます成熟し始めています。

文章が良くない場合、私を修正したり批判したりするのは歓迎ですが、理由のない批判は歓迎されません。神様、遠回りしてください。

くだらない話はやめて、本題に入りましょう。 基本的な考え方は次のとおりです。高さが固定された外側の div (この例では 180px など) を定義し、属性 overflow:hidden (境界線を越える部分を非表示にする) を設定します。次に、この div 内に内部 div を定義し、属性position:relative (相対レイアウト) を設定します。この内側の div で画像を定義し、その高さを外側の div の高さと同じになるように注意して設定し (この例では 180px など)、テキストを配置する div を定義します。 div は外側の div の高さと同じです (この例では 180px のように、パディングを指定すると、それに応じて高さが減り、div 全体の高さが 180px になります)。レイアウトコードは次のとおりです。
html:

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

コードは次のとおりです:
#外側

{ 高さ:180px; オーバーフロー:非表示;} #内側{ 位置:相対;

}

#text
{
 幅:160px;
 高さ:160px;
 背景:#0000ff;
 パディング:10px;
 カラー:#fff;
}

残りはJQueryです。まず、この「ダイナミック タイル」の動作を理解します。最初に画像が表示され、次に上にスライドしてテキストが表示され、しばらく滞在してから下にスライドして画像が表示されます。まず関数を定義しましょう: 

コードをコピーします 

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

function go (id, d1 , px1, val1, d2, px2, val2) {

$(id).lay(d1); $(id).animate({bottom: px1 }, val1, function () { $(id).lay(d2); $(id).animate({bottom: px2 }, val2); });}

ここでは 7 つのパラメータ、id はスライドする div である内部 div の ID、d1 は上にスライドした後の内部 div の滞在時間、px1 は上にスライドする内部 div の相対位置、デフォルトです。現在の位置は 0px、val1 は内側の div が上方向にスライドするまでの時間です。 d2 は下方向にスライドした後の位置です。 px2 は下方向のスライドの相対位置です。まだ 0px であり、val2 は下方向のスライドが完了するまでの所要時間です。 

次に、ページのロード時に定義した go 関数を実行するタイマーを設定します。 

コードをコピー

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

$(function () {
 timer1 = setInterval(function () {
 go("#inside", 1500, "180px", 1200, 1000, "0px", 2000); 
 }, 3000);
});

ここで、タイマーに go 関数を 3 秒ごとに実行させます。
ソースコードは基本的に公開されています。ソースファイルが必要な場合は、ここをクリックしてをダウンロードしてください。

JQuery を使用して win8 と同じクールな動的タイル効果を実現する (サンプル コード)_jquery

JQuery を使用して win8 と同じクールな動的タイル効果を実現する (サンプルコード)_jquery