- jQuery: 究極のスライドショーライブデモ (01/15)
- jQueryの実践サンプル集 (Part2) (12/20)
- AjaxでAmazonの書籍をスライドで表示(自動|手動切り替え版) (06/24)
- JavaScript: AjaxでFlickrの写真をスライドで表示 (06/22)
- JavaScript: イメージをライトアップする(2) (06/22)
一定期間更新がないため広告を表示しています
一定期間更新がないため広告を表示しています
◆jQuery - スライドショー#1
このサンプルは、VCRボタンを使用してイメージを切り替えます。
◆jQuery - スライドショー#2
このサンプルは、イメージをサムネイル化して表示します。サムネイ化したイメージは左右にスクロールすることができます。イメージをクリックすると拡大表示します。
◆jQuery - スライドショー#3
このサンプルは、イメージをサムネイル化して表示します。イメージは上下にスクロールすることができます。イメージをクリックすると拡大表示します。イメージの「タイトル」と「説明文」も表示します。
◆jQuery - スライドショー#4
このサンプルは、イメージをサムネイル化して表示します。サムネイル化されたイメージをスクロールするには両端にマウスを移動します。
イメージをクリックすると拡大表示されます。[自動]ボタンをクリックすると7秒間隔でイメージを自動的に切り替えます。手動で切り替えることもできます。究極のスライドショーです。
◆jQuery: メニュー編
jQuery: ドック型メニュー
jQuery: ラバランプ型メニュー
jQuery: ラバランプ型メニュー (Part2)
jQuery: タブ型メニュー
jQuery: ツリー型のメニュー
jQuery: ツリー型のメニュー (Folder)
jQuery: ドロップダウン型メニュー(水平)
jQuery: ドロップダウン型メニュー(垂直)
jQuery: コンテキスト型のメニュー
jQuery: スライディング型のメニュー
jQuery: アコーディオン型のメニュー
jQuery: アコーディオン型のメニュー (Part2)
jQuery: アコーディオン型のメニュー (Part3)
◆jQuery: アコーディオン編
jQuery: アコーディオン
jQuery: アコーディオンメニュー
jQuery: 水平型アコーディオン
jQuery: 水平型アコーディオン (Part2)
jQuery: ポートレット
◆jQuery: テキスト、テキストエリア編
jQuery: Textareaのタブを有効にする
jQuery: Textareaをリサイズする
jQuery: ニュースティッカーを表示する
jQuery: イメージを切り替える
◆jQuery: ツールチップ、リンク編
jQuery: ツールチップ(Ajax版)
jQuery: カスタムツールチップ
jQuery: パンチカード(ソーシャルブックマーク版)
◆jQuery: ウィンドウ編
jQuery: ポップアップウィンドウ(リサイズ&ドラッグ)
jQuery: モダルダイアログ
jQuery: ページをブロックする
jQuery: ダイアログを表示する
◆jQuery: ボーダー、コーナー、スタイルシート編
jQuery: ボックスの角をカスタマイズする
jQuery: カラーピッカー
jQuery: 星(★)の数で評価する
jQuery: スタイルシートを切り替える
◆jQuery: テーブル、グリッド編
jQuery: テーブルの列を並べ替える
jQuery: テーブルの幅をリサイズする
jQuery: テーブルをページングする
jQuery: テーブルの行/列をハイライトする
◆jQuery: ドラッグ&ドロップ編
jQuery: 任意の方向にドラッグする
jQuery: ドロップするときのオプション設定
jQuery: フォルダーツリーをドラッグ&ドロップして移動
jQuery: リサイズ&ドラッグする
◆jQuery: スライダー編
jQuery: YouTubeのビデオを左右にスライドさせる
jQuery: スライダーでイメージを拡大・縮小する
jQuery: 水平方向にスライドさせる
jQuery: カラーピッカー
jQuery: スライダーで価格を選択
◆jQuery: スライドショー、イメージギャラリー、サムネイル編
jQuery: スライドショー
jQuery: イメージギャラリー
jQuery: イメージを水平方向にスクロール
jQuery: イメージを垂直方向にスクロール
jQuery: イメージを水平方向にスクロール(thickbox版)
jQuery: イメージをサムネイル化する
◆jQuery: 日付、時間編
jQuery: カレンダーから日付を選択する
jQuery: マウスで時刻を入力する
jQuery: カウントダウン
jQuery: タイマー
◆jQuery: フォーム、検証、進捗状況編
jQuery: 入力データを検証する
jQuery: すかし文字を表示する
jQuery: 入力したデータをクッキーに保存する
jQuery: 複数のドロップダウンリストを連動させる
jQuery: 進捗状況を表示する
このサンプルは、Amazonの書籍をジャンル(タレント)で検索してスライド形式で表示します。スライドは1秒間隔で自動的に切り替わります。スライドの番号をクリックすると手動で切り替えすることができます。
このサンプルは、FlickrのWebサービス経由で取得した写真をスライドで表示します。スライドは3秒間隔で切り替わります。番号[1]-[10]をクリックするそのスライドを表示します。[Next]をクリックすると手動に切り替わります。
このサンプルは、イメージにスポットライトをあてます。マウスを移動するとスポットライトが移動します。写真を部分的に表示したいときに応用すると便利です。
s = 50; // スポットライトのサイズ
vp = 10; // イメージの可視領域(パーセント)
startx = 0; // スポットライトの位置(X軸)
starty = 0; // スポットライトの位置(Y軸)