
【タブメニュー】URLに応じたコンテンツ表示
同一ページ内のタブ切り替えで、タブごとに「#tab01、#tab02、#tab03」をURLに付与します。タブごとに独自のURLを持つことで、URLに応じたコンテンツを表示することができます。
同一ページ内のタブ切り替えで、タブごとに「#tab01、#tab02、#tab03」をURLに付与します。タブごとに独自のURLを持つことで、URLに応じたコンテンツを表示することができます。
マウスオーバーでフェードして画像の透過度を50%にします。マウスアウトでフェードして元に戻します。CSSのみの記述とjQueryのみの記述、どちらでも同じ動きが実装できます。
ブロック要素にランダムで画像を表示、マウスオーバーで画像の表示領域を拡大します。また、ブロック要素には表示画像ごとにリンクを設定します。
ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。 コンテンツはajaxを利用してjsonファイル内のデータを読み込みます。
CSSのメディアクエリを使わずに、jQueryを利用してPC用の画像とスマホ用の画像を切り替えます。切り替え対象の画像にクラス名を付与することで簡単に設定可能です。
ブロック要素をクリックでリンクの動作になります。htmlの構造上、aタグはテキストリンクでのみ使用し、aタグでブロック要素を囲むことはしていません。マウスオーバー時の動作はCSS、クリック時のリンクの動作はjQueryで実装します。
ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。 コンテンツはajaxを利用してxmlファイル内のデータを読み込みます。
simplelib.jsは様々なプラグインを動的に読み込んで実行できます。そのプラグインの中で、マウスオーバーで画像をスクロール表示するtrimmedScrollのサンプルです。
ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。 カテゴリーの判別はjQueryのfilterを利用します。
フェードインで表示するニュースティッカーを、プラグインを利用せずシンプルなjQueryの記述で実装しています。サンプルは画像上に透過の背景色を乗せ、その上にニュースティッカーを表示させています。