jQueryのお勉強

05:トグルメニュー

メニュー1
メニュー2
メニュー3
メニュー4

ボタンを押すことで開閉するタイプのトグルメニュー。開閉したい部分をulで囲んでdisplay:noneで非表示にしておく。開閉はslideToggleメゾットを使う。

06:アラートボックス

戻るボタンを押すと閉じることができます。

半透明背景を用意しておき、position:fixedで全画面に固定する。jsでhideしておいて、ボタンが押されたらfadeIn/Outするようにすれば良い。

07:ビューアー

サムネをaタグで囲み、そのhrefをattrにより取得。その際$(this)を使うが、アロー関数で書いているとうまくいかないみたい。リンクの無効はreturn falseで行う。

ボロボロの小屋で時間を忘れて錬金術の研究に明け暮れている。大人っぽい女性的な体に憧れており、実はその研究をしているとかしていないとか。

ヘルエスタ王国の第二皇女。文武両道学園主席、真面目で誰にでも優しくかなりの人望がある。王位継承の資格者として日々鍛錬や人とのコミュニケーションを大事にしている。

寂れた和風喫茶で働く女の子。店長の趣味でメイド服を着せられている。足下に見え隠れする尻尾が本物かどうかは、触れた人のみぞ知る。満月の夜は何か不思議な事が起きるらしい？

テキストのdivにはidを振っておく。タブのaのhrefには先ほどのidだけでなく「#tab」のように#を入れれば、$([hrefの中身]).showで表記できる。タブの色の切り替えはactiveクラスをとったりつけたりすれば良い。

09:ドロップダウンメニュー

ul>liでリストを作り、そのliの中にul>liを作る入れ子構造にする。ドロップダウン風にするにはドロップダウンのulをposition:absoluteにする必要がある。

10:フローティングメニュー

absoluteにしてtopをjsで変えていく。$(window).scroll(f)でスクロールした時の挙動を書ける。$(window).scrollTop()でスクロール量（上にはみ出た量）がわかるためanimateでtopを変える。 animate({'top':***},600)のような感じ。

11:Lightbox風モーダルウィンドウ

appendメソッドによって背景と写真のタグを追加。背景をクリックしたらフェードアウトするように書けば良い。その時要素をremoveしないとどんどん蓄積されるので注意。アラートボックスのようにやっても多分いける。

12:画像のキャプション表示

ホバーするとキャプション枠がfadeInし、下から文章が浮き上がってくるイメージ。imgのaltに文章を書き、それをp(appendで生成)の中身に入れてあげる。jsで先にキャプションや文章を生成した後（この段階ではdisplay:none)、ホバーの処理をすれば良い。

13:ツールチップ

divはjsにより追加。クラスを指定してあらかじめcssに書いておく。ツールチップ自体の作り方が難しい。三角はafterで、borderを利用して作る。ツールチップおよび三角はabsoluteにする。あとはjsのcssメソッドで位置を指定。この時にoffset().topなどを用いて位置を考える。

15:文字サイズの変更

ボロボロの小屋で時間を忘れて錬金術の研究に明け暮れている。大人っぽい女性的な体に憧れており、実はその研究をしているとかしていないとか。
ヘルエスタ王国の第二皇女。文武両道学園主席、真面目で誰にでも優しくかなりの人望がある。王位継承の資格者として日々鍛錬や人とのコミュニケーションを大事にしている。
寂れた和風喫茶で働く女の子。店長の趣味でメイド服を着せられている。足下に見え隠れする尻尾が本物かどうかは、触れた人のみぞ知る。満月の夜は何か不思議な事が起きるらしい？

cssで各サイズのクラスを指定しておき、jsでつけはずしをする。htmlメソッドでSMLを取得して、if文により付けるクラスを決める。

16:パララックス効果（スライド）

スライドは横長に作っておく。スクリーンにrelative, スライドにabsoluteを指定して左上の位置を計算する。はみ出る部分を隠すのはoverflow:hidden。丸ボタンはborder-radiusを用いて作る。liの中身に数字を入れて、text-indent:-999pxで隠せば、jsでhtmlメソッドから番号の取得ができる。

17:フィルタリング

ボタンにvalue属性を付与し、liに該当するclassをつける。liにeachメソッドを用いて絞り込みを行う。hadClassではなくhasClass(スペル注意)

19:アコーディオンパネル

アンジュ: ボロボロの小屋で時間を忘れて錬金術の研究に明け暮れている。大人っぽい女性的な体に憧れており、実はその研究をしているとかしていないとか
リゼ: ボロボロの小屋で時間を忘れて錬金術の研究に明け暮れている。大人っぽい女性的な体に憧れており、実はその研究をしているとかしていないとか
戌亥: ボロボロの小屋で時間を忘れて錬金術の研究に明け暮れている。大人っぽい女性的な体に憧れており、実はその研究をしているとかしていないとか

アコーディオンはdl>dt,dd,dt,dd...で作る。jsでwidthを変更。cssでoverflow:hiddenにしておけば文章がはみ出ない。開いているものを選択した時に閉じないよう、active(active-btn)はdt,dd両方につける。

21:バナーのランダム表示

乱数を発生させ、ファイル名に対応させる。その際、配列を用いると便利。

23:スライドメニュー

スライドメニューはfixする。margin-leftをマイナスにすれば通常時に見えなくすることができる。数値を増やす時にはbodyのchildrenに対してanimateすれば全体を動かすことができる。

25:ブラウザ上部に固定されるヘッダー

$(window).scroll(f)を用いてスクロール量を比較。cssメソッドでfixedを付け加えればよい。cssの方には最初からtopとleftを指定しておく。

26:メニューのハイライト

for文で書く要素のtopを調べて、現在のスクロール量と比較する。それに応じてactiveを付け外しすれば良い。

27:スライドショー（横スクロール）

初めに最後の画像をリストの最初に持っていき、leftを調整して１番目の画像が映るようにする。（これで左右に画像があるためどちらの方向にもスライドできる）setIntervalメソッドを使って繰り返し処理。左右ボタンをクリックしたときはタイマーをクリアして、再びsetIntervalすればタイマーをリセットできる。スライドの方向は変数で管理し、変数の値によって異なる挙動をさせれば良い。

28:スライドショー（フェードイン/アウト）

スライドしないので画像を繋げる必要はない。変数current,nextを使い、フェードアウト/インさせるli番号を管理する。nth-childを使えば表示したい画像を表示することができる。