はじめに
第1章 |
JavaScriptで“クール”なページを作るには |
「HTML」 + 「CSS」 + 「JavaScript」 = 動きのあるページ HTML/CSSを操作する 動くタイミング(イベント)を設定する アニメーション効果をつける 動きのあるページを作るのは大変?
jQueryとは jQueryプラグインとは セレクター
jQueryの準備 「Reflect jQueryプラグイン」を使ってみる プラグインのオプションを指定して動作を変えてみる プラグインの探し方
4章の読み方 サンプル・ページについて
画像 画像を切り替える(フェード) 画像を切り替える(フェード2) 画像を切り替える(サイズ、フェード) 画像を切り替える(スライド) 画像を切り替える(奥行き) 画像を切り替える(サイコロ) 画像を切り替える(シャッター) 画像を切り替える(カルーセル) 画像を切り替える(色々) 画像の一部分を拡大する 縮小した全景で画像を見る パノラマ風に画像を表示する 画像を反射する LightBoxを表示する 画像にマスク処理を施す マウスオーバーで画像を拡大表示する 透過PNGをIE6でも表示させる
スタイル マーキーを滑らかに実装する クリックできる範囲を広げる 要素の高さを最大のものに揃える グラデーションを作成する 文書中の指定文字列をハイライトする 要素の角を丸くする ツールチップを表示する テーブルにHover効果をつける チェックボックスやラジオボタンを装飾する マウスオーバーで画像を切り替える 画像を傾ける 画像にキャプションをつける
エフェクト 要素を回転させる効果をつけて切り替える 要素をページの外へ除外する マウスオーバーで背景色をゆっくり変更する 文字をタイプライターのように出力する 要素に波紋が広がるような効果をつける 注目させたい箇所をハイライトする 「これはここですよ」と指し示す
入力補助 時刻入力を簡単にする 入力ヒントをタイプライター式に表示する selectタグをスライダーで表示する フォームにサンプル文字列を表示する フォームの入力文字数を数える カラーピッカーを表示する 入力された値を整形する チェックボックスを一括変更する スピンボタンをつくる
インターフェイス マウスの動きにあわせて画面をスクロールする ダイアログを表示する 枠をページ下部に常に表示する テキストを選択できないようにする テキストエリアの高さを自動で調整する メッセージを分かりやすく目立たせる プロンプトを表示する 長い文章をたたんで表示する 目次を自動作成する 星評価をする 指定した位置まで画面をスクロールする テーブルに並び替え機能をつける 長い文章を分割表示する
コンテンツを流れるように表示する 162 画像を画面スクロールに合わせて表示する ウィザード形式のインターフェイスを実装する リンク先の画像をプレビューする
ナビゲーション iPod風のスタイルメニューをつくる パンくずを折りたたんで表示する マウスオーバーしたメニューを開く LavaLamp型の効果をメニューに実装する 階層構造メニューをつくる
遊び 要素の角をめくる 画像レイヤーを重ねる オドメーター風のカウントアップ機能をつける スライドパズルをつくる 追尾するメニューをつくる
[付録]セレクター・リファレンス あとがき 索引
※ 内容が一部異なる場合があります。発売日は、東京の発売日であり、地域によっては1〜2日程度遅れることがあります。あらかじめご了承ください。
|