検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery を使用して win8 と同じクールな動的タイル効果を実現する (サンプル コード)_jquery

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

WBOY
WBOYオリジナル
2016-05-16 17:29:001426ブラウズ

私は個人的に、製品が成熟しているかどうかに関係なく、まったく新しい製品を提供する 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 秒ごとに実行させます。
ソースコードは基本的に公開されています。ソースファイルが必要な場合は、ここをクリックしてをダウンロードしてください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：javascript_javascript スキルにおける parseInt と parseFloat の違い次の記事：javascript_javascript スキルにおける parseInt と parseFloat の違い

関連記事

続きを見る