JavaScript + Ajax 新着サンプルトップ50

jQueryのinfiniteCarouselでイメージを自動回転させる

2010/03/13 1:57:32

このサンプルは、jQueryのInfiniteCarouselプラグインを利用してイメージを水平方向に自動スクロールします。イメージを手動でスクロールするには、左右の矢印ボタンをクリックします。マウスをイメージに移動するとスクロールを一時的に停止します。マウスをイメージの外に移動すると自動スクロールを再開します。イメージをクリックすると新規ウィンドウを表示させることもできます。ここでは、イメージのクリックを無効にしています。

jQueryのsliderでイメージを左右にスクロールさせる

2010/03/13 0:21:08

このサンプルは、jQueryのsliderでイメージを左右にスクロールさせます。サンプルのイメージが表示されたら左右に矢印をクリックしてスクロールしてください。中央に表示されるイメージは拡大表示されます。イメージには、タイトルと説明が表示されます。「more link」をクリックすると新規ウィンドウを表示します。ここではリンクを無効にしています。

Twitter APIを利用してキーワードで検索した結果を表示する(ページング機能追加) V2

2010/03/11 21:38:41

このサンプルは、TwitterのAPIを利用してキーワードに関連するつぶやきを検索して表示します。サンプルが表示されたら検索窓にキーワードを入力して[検索]ボタンをクリックします。ページングするときは、「次へ」と「前へ」をクリックします。

YouTubeからユーザー指定で動画を検索して表示する

2010/03/11 6:18:24

このサンプルは、YouTubeから動画をアップロードしたUserID指定で動画を検索して表示します。ここでは、[検索]ボタンをクリックすると「AkioKasai」のUserIDで動画を検索します。ちなみに、ここに表示される動画は私がアップロードしたものです。

YouTubeからキーワードで動画を検索して表示する

2010/03/11 5:45:18

このサンプルは、YouTubeから検索キーワードに関連する動画を検索して表示します。検索窓にキーワードを入力してドロップダウンから「期間」を選択したら[検索]ボタンをクリックします。サムネイルが50件表示されます。サムネイルをクリックするとズームインボックスに動画が表示されますので[再生]ボタンをクリックします。サムネイルは左右の矢印ボタンをクリックしてスクロールします。

YouTubeからもっとも見ている動画を検索して表示する

2010/03/11 5:36:49

このサンプルは、YouTubeからもっとも見ている動画を検索して表示します。ドロップダウンから「期間」を選択したら[検索]ボタンをクリックします。サムネイルが50件表示されます。サムネイルをクリックするとズームインボックスに動画が表示されますので[再生]ボタンをクリックします。サムネイルは左右の矢印ボタンをクリックしてスクロールします。

YouTubeからもっとも人気のある日本語の動画を検索して表示する

2010/03/11 5:41:40

このサンプルは、YouTubeからもっとも人気のある日本語の動画を検索して表示します。ドロップダウンから「期間」を選択したら[検索]ボタンをクリックします。サムネイルが50件表示されます。サムネイルをクリックするとズームインボックスに動画が表示されますので[再生]ボタンをクリックします。サムネイルは左右の矢印ボタンをクリックしてスクロールします。

YouTubeからもっとも人気のある動画を検索して表示する V4

2010/03/11 5:59:54

このサンプルは、YouTubeでもっとも人気のあるビデオを検索して表示します。サンプルが表示されたらドロップダウンから「期間」を選択して[検索]ボタンをクリックします。サムネイルが50件表示されます。左右の矢印ボタンをクリックするとサムネイルがスクロールします。サムネイルをクリックするとズームインしてビデオが表示されますので[再生]ボタンをクリックします。再生中のビデオを切り替えにはビデオの下に表示されている左右の矢印ボタンをクリックします。ズームインボックスを閉じるには右上の[X]ボタンをクリックします。

YouTubeからもっとも人気のある動画を検索して表示する V3

2010/03/11 0:20:45

このサンプルは、YouTubeのもっとも人気のある動画を検索して表示します。サンプルが表示されたらドロップダウンから「期間」を選択して[検索]ボタンをクリックします。ビデオのサムネイルが10件表示されたらお好みのサムネイルをクリックします。サムネイルがズームインしたら[再生]ボタンをクリックします。ズームボックスの下にビデオのタイトルと左右の矢印ボタンが表示されます。再生中のビデオを切り替えるには左右の矢印ボタンをクリックします。ビデオを閉じるには右上の[X]ボタンをクリックします。

YouTubeからもっとも人気のある動画を検索して表示する V2

2010/03/10 23:02:09

このサンプルは、YouTubeからもっとも人気のある動画を検索して表示します。サンプルが表示されたらドロップダウンから「期間」を選択して[検索]ボタンをクリックします。検索結果が10件表示されます。サムネイルをクリックするとビデオを再生します。

YouTubeからもっとも人気のある動画を検索して表示する

2010/03/10 19:38:23

このサンプルは、YouTubeのAPIを利用してもっとも人気のあるビデオを表示します。サンプルが表示されがらドロップダウンリストから期間を選択して[検索]ボタンをクリックします。検索結果が10件表示されます。サムネイルにマウスを移動するとビデオのタイトルが表示されます。サムネイルをクリックするとYouTubeのサイトに移動します。

Ajax: Flickrの検索結果をGallerifficプラグインで表示する V2

2010/03/10 13:42:17

このサンプルは、Flickrの写真を検索してjQueryのGallerifficプラグインで表示します。サンプルの検索ボックスにキーワードを入力したら[検索]ボタンをクリックします。検索結果が120件Gallerifficに表示されます。サムネイルが12個単位でタブに表示されます。タブ[1]-[10]をクリックするとサムネイルが切り替わります。[Prev][Next]をクリックして切り替えることもできます。サムネイルをクリックすると右側に拡大表示されます。拡大されたイメージを自動的に切り替えるには、左上の[Play Slideshow]をクリックします。手動で切り替えるには右上の[Previous Photo][Next Photo]をクリックします。

Ajax: Flickrの検索結果をadGalleryプラグインで表示する V2

2010/03/10 13:24:47

このサンプルは、Flickrから検索した写真をjQueryのadGalleryプラグインで表示します。サンプルのテキストボックスに検索キーを入力したら[検索]ボタンをクリックします。すると検索結果が10件adGalleryに表示されます。下のサムネイルをクリックするとイメージが拡大表示されます。サムネイルをスクロールさせるには、左右に表示されている矢印にマウスを移動します。サムネイル右上の[Start][Stop]をクリックすると自動的にイメージを切り替えます。

フロムエーナビから職種で求人を検索してスライドに表示する

2010/03/09 15:46:20

このサンプルは、リクルートのフロムエーナビを利用して職種で求人情報を検索します。検索結果は、jQueryのyoxViewプラグインを利用してスライドで表示します。サンプルが表示されたら、ドロップダウンリストから職種、勤務時間などを選択して[検索]ボタンをクリックします。検索結果が最大８件表示されます。サムネイルをクリックするとイメージが拡大表示されます。拡大されたイメージを自動切り替えするには、マウスを右上に移動して[再生]ボタンをクリックします。自動切り替えを中止するには[X]をクリックします。拡大したイメージを手動で切り替えするには左右の[PREV][NEXT]ボタンをクリックします。イメージの下にページ番号と説明が表示されます。

リクルートの「じゃらん」の検索結果を３Ｄで表示する

2010/03/09 16:49:46

このサンプルは、リクルートの「じゃらん」を検索して宿泊施設を表示します。ここでは、jQueryのImageCubeプラグインを利用して検索結果を３Ｄで表示しています。サンプルが表示されたらドロップダウンリストから場所を選択して[検索]ボタンをクリックします。検索結果が３Ｄで回転します。イメージにマウスを移動すると施設の説明が表示されます。イメージをクリックすると「じゃらん」のサイトに移動します。

CSS版イメージマップ

2010/03/06 7:04:20

このサンプルは、スタイルシートを利用してイメージマップを実装しています。マウスをイメージのブロックに移動すると下に説明文が表示されます。ブロックをクリックすると説明文が固定されます。

jQueryのImageCubeプラグインを利用してイメージを回転させながら切り替える V2

2010/03/05 12:48:20

このサンプルは、jQueryのImageCubeプラグインを利用してイメージを回転させながら切り替えます。ドロップダウンリストから回転スピード、ポーズスピード、イージングなどを選択してアニメーションをカスタマイズすることができます。

jQueryのImageCubeプラグインを利用してイメージを回転させながら切り替える

2010/03/05 12:39:53

このサンプルは、jQueryのImageCubeプラグインを利用してイメージを回転させながら切り替えます。[Stop]ボタンをクリックすると回転を止めます。[Start]ボタンをクリックすると回転を再開します。[Remove]ボタンをクリックするとイメージを個別に表示します。[Re-Attach]ボタンをクリックするとイメージを重ねます。ここでは、5個のイメージを任意の方向に回転させながら切り替えています。

jQueryでメージを縦にフリップする

2010/03/05 10:58:06

このサンプルは、jQueryのanimateメソッドを利用してイメージを垂直方向にフリップします。サンプルのイメージをクリックするとフリップして次のイメージが表示されます。

jQueryでメージを横にフリップする

2010/03/05 10:58:15

このサンプルは、jQueryのanimateメソッドを利用してイメージを水平方向にフリップします。サンプルのイメージをクリックするとフリップして次のイメージが表示されます。

jQueryで3Dを実装する

2010/03/05 7:44:58

このサンプルは、jQueryの3 DEngine ライブラリで3Dを実装します。サンプルが実行されるとスマイルのアイコンが3Dで表示されます。

Sexy Curlsプラグインでページの角をまきあげる

2010/03/04 11:54:39

このサンプルは、jQueryのSexy Curlsプラグインでウェブページの角をまきあげます。サンプルが表示されたら右上の角を左下にドラッグしてください。ページがまきあげられてコードが表示されます。

jFlipプラグインでイメージをフリップさせながら切り替える

2010/03/04 11:54:48

このサンプルは、jQueryの jFlip プラグインでイメージをページをめくる感覚で切り替えます。サンプルが表示されたらイメージ下の左右の角にマウスを移動してみてください。マウスをイメージの角に移動すると角がフリップしますのでクリックしてください。すると、イメージが切り替わります。

Ajax: AmazonからDVDを検索してイメージを回転させる

2010/03/04 22:55:42

このサンプルは、AmazonのWebサービスを利用してDVDを検索して表示します。サンプルのテキストボックスに映画のタイトル、俳優名などを入力したら検索ボタンをクリックします。検索結果として最大５件のDVDが回転して表示されます。マウスをイメージの上に移動すると回転が停止します。数秒間マウスをイメージ上に保持すると回転を停止します。再度イメージを回転させるには、マウスを白のボックスに出し入れしてください。マウスを白ボックスの左右に移動すると回転方向を切り替えたり、回転速度を調整することができます。イメージをクリックすると新規ウィンドウにアマゾンのサイトを表示します。

coolirisでYouTubeのビデオ3Dでアニメーション化する

2010/03/03 14:27:26

このサンプルは、 Cooliris Express を利用してYouTubeのビデオを3Dでアニメーション化します。サンプルにビデオが表示されたら下の青のスライダーをドラッグして左右に移動してみてください。ビデオが3Dで移動します。サムネイルをクリックするとビデオ再生します。ビデオを切り替えるには下の左右の矢印ボタンをクリックします。ビデオを閉じるには右上の[X]をクリックします。[X]ボタンの下の矢印をクリックするとフルスクリーンに切り替えることができます。ここでは、マイケルジャクションの「This is it」のビデオを表示しています。

CoolirisでFlickrの写真を3Dでアニメーション化する

2010/03/03 14:29:57

このサンプルは、 Cooliris Express を利用してFlickrの写真を3Dでアニメーション化します。サンプルに写真が表示されたら下の青のスライダーをドラッグして左右に移動してみてください。写真が3Dで移動します。サムネイルをクリックすると拡大します。イメージを切り替えるには下の左右の矢印ボタンをクリックします。イメージを閉じるには右上の[X]をクリックします。[X]ボタンの下の矢印をクリックするとフルスクリーンに切り替えることができます。ここでは、「Flowers」に関連する写真を表示しています。

SNSボタンを回転させる

2010/03/03 10:40:51

このサンプルは、jQueryの各種apiを利用してSNS用のボタンを回転させて表示します。ボタンにマウスを移動すると回転を停止します。白のボックスにマウスを移動すると回転方向を変えることができます。マウスをボックスの右に移動すると時計回りに回転します。ボックスの左側に移動すると時計回りと反対方向に回転します。回転を開始するまで時間がかかりますので数秒間待ってください。

金魚が泳ぐガジェット

2010/03/02 18:22:33

金魚が泳ぐガジェットです。ブログなどでお使いください。

Ajax: Amazonから音楽を検索してCD/DVDのイメージを回転させる V2

2010/03/03 9:18:29

このサンプルは、AmazonのWebサービスを利用して音楽を検索して表示します。テキストボックスに曲名、歌手名などを入力したら検索ボタンをクリックします。検索結果が最大５件表示されます。[Start]ボタンをクリックするとイメージが自動的に回転します。[Stop]をクリックすると自動回転を停止します。手動で回転させるには、[Next][Previous]をクリックします。回転スピードとイメージの間隔はスライダーで調整することができます。画面中央に拡大されているイメージをクリックすると、新規ウィンドウにアマゾンのサイトを表示します。中央以外のイメージをクリックすると、そのイメージを中央に拡大表示します。

このサンプルは、Firefox、Chrome、Safariでご覧ください。IE8でご覧になるとあまりスムーズに回転しません。

RoundAboutプラグインでイメージを回転させる v2

2010/03/02 14:54:02

このサンプルは、jQueryの RoundAbout プラグインを利用してイメージを左右に回転させます。サンプルが表示されたら任意のイメージをクリックしてみてください。クリックしたイメージが画面中央に表示されます。 [Next][Previous]をクリックすると手動でイメージを回転させることができます。スライダーを利用するとイメージを自動で回転させることができます。上のスライダーはスピード、下のスライダーは間隔を調整します。自動回転を停止するには[Stop]をクリックします。イメージの間隔を初期化するには[Reset]をクリックします。

RoundAboutプラグインでボックスを回転させる v2

2010/03/02 14:40:15

このサンプルは、jQueryの RoundAbout プラグインを利用してボックスを左右に回転させます。サンプルが表示されたらスライダーをドラッグしてボックスを回転させてください。上のスライダーで移動スピード、下のスライダーで間隔を調整します。ボックスの移動を止めるには[Stop Moving]をクリックします。ボックスの間隔をリセットするには[Reset]をクリックします。手動でボックスを移動させるときは、[Next][Previous][To]ボタンをクリックします。手動でボックスを移動するときドロップダウンリストから各種エフェクトを選択できます。

RoundAboutプラグインでイメージを回転させる

2010/03/02 14:40:25

このサンプルは、jQueryの RoundAbout プラグインを利用してイメージを左右に回転させます。サンプルが表示されたら任意のイメージをクリックしてみてください。クリックしたイメージが画面中央に表示されます。

RoundAboutプラグインでボックスを回転させる

2010/03/02 12:19:21

このサンプルは、jQueryの RoundAbout プラグインを利用してボックスを左右に回転させます。サンプルが表示されたら任意のボックスをクリックしてみてください。クリックしたボックスが画面中央に表示されます。

注文ボタンを１回のみクリックできるようにする

2010/03/02 5:10:44

このサンプルは、jQueryのoneイベントを利用して[注文]ボタンを１回のみクリックできるようにしています。サンプルが表示されたら[Order!]ボタンをクリックしてみてください。１回目のボタンをクリックすると２回目以降同じボタンをクリックしても無効になります。

Ajax: Amazonからソフトウェアを検索して表示する

2010/03/01 21:57:09

このサンプルは、AmazonのProduct Advertising APIを利用してソフトウェアを検索して表示します。サンプルが表示されたらテキストボックスにソフトのタイトルなどを入力して[Search Amazon...]ボタンをクリックしてください。検索結果が最大10件表示されます。パッケージソフトのイメージにマウスを移動するとツールチップにソフト名、OS、価格が表示されます。イメージをクリックすると新規ウィンドウにアマゾンのサイトを表示します。

Ajax: Amazonから音楽を検索して表示する

2010/03/01 21:38:21

このサンプルは、AmazonのProduct Advertising APIを利用してMusicを検索して表示します。サンプルが表示されたらテキストボックスに音楽のタイトル／歌手名などを入力して[Search Amazon...]ボタンをクリックしてください。検索結果が最大10件表示されます。CD/DVDのイメージにマウスを移動するとツールチップにタイトル、歌手名、価格が表示されます。イメージをクリックすると新規ウィンドウにアマゾンのサイトを表示します。

Ajax: AmazonからDVDを検索して表示する

2010/03/01 20:36:52

このサンプルは、AmazonのProduct Advertising APIを利用してDVDを検索して表示します。サンプルが表示されたらテキストボックスに映画のタイトル／俳優名などを入力して[Search Amazon...]ボタンをクリックしてください。検索結果が最大10件表示されます。DVDのイメージにマウスを移動するとツールチップにDVD名、俳優名、価格が表示されます。イメージをクリックすると新規ウィンドウにアマゾンのサイトを表示します。

Ajax: Amazonから家電・カメラを検索して表示する

2010/03/01 19:38:22

このサンプルは、AmazonのProduct Advertising APIを利用して家電・カメラを検索して表示します。サンプルが表示されたらテキストボックスに商品名／メーカー名などを入力して[Search Amazon...]ボタンをクリックしてください。検索結果が最大10件表示されます。商品のイメージにマウスを移動するとツールチップに商品名、型名、価格が表示されます。イメージをクリックすると新規ウィンドウにアマゾンのサイトを表示します。

Yahoo!ショッピングサイトを検索して結果を表示する

2010/03/01 16:27:48

このサンプルは、Yahoo!JapanのショッピングのWebサービスを利用して商品の検索結果を表示します。サンプルが表示されたらテキストボックスにキーワードを入力して[Search Yahoo! Shopping]ボタンをクリックします。検索結果が最大10件表示されます。

Yahoo!知恵袋を検索して結果を表示する

2010/03/01 10:44:01

このサンプルは、Yahoo!JapanのWebサービスを利用して「知恵袋」をキーワードで検索して結果を表示します。サンプルが表示されたらテキストボックスに検索キーワードを入力して[Search Yahoo! Wisdom]ボタンをクリックします。検索結果が最大10件表示されます。

リンク先を新規ウィンドウに表示する

2010/03/01 7:10:00

このサンプルは、achor要素のrel属性に「external」が設定されているとき、「terget="_blank"」属性を追加してリンク先を新規ウィンドウに表示します。

テキストボックスにヘルプ情報を表示する

2010/03/01 6:39:28

このサンプルは、テキストボックスにヘルプ情報を表示します。ウェブページが表示されるとテキストボックスに「Enter your searh text here」を表示します。テキストボックスにフォーカスを移動するとヘルプ情報を削除します。テキストボックスに何も入力しない状態でテキストボックスからフォーカスを移動するとヘルプ情報を再表示します。

jQueryのjMP3プラグインでMP3プライヤーを表示する

2010/02/28 6:41:54

このサンプルは、jQueryの jMP3 プラグインを利用してMP3プライヤーを表示します。 Demo#1は、[Play]ボタンのみ表示します。Demo#2は、[Play]ボタンと[Download]ボタンを表示します。Demo#3は、外部のサイトに格納されているMP3ファイルを再生します。 [Play]ボタンをクリックするとMP3ファイルを再生します。[Pause]ボタンをクリックすると再生を一時停止します。

Yahoo!オークションの商品を検索して表示する

2010/03/01 16:27:13

このサンプルは、Yahoo!オークションのWebサービスを利用して検索窓に入力した商品を検索して表示します。サンプルが表示されたら検索窓に商品名を入力して[Seacrh Yahoo! Auction]ボタンをクリックします。検索結果として最大50件の商品が表示されます。

特定地域の宿泊施設をグーグルマップに表示する

2010/02/26 12:43:01

このサンプルは、リクルートのじゃらんのWebサービスを利用して宿泊施設をグーグルマップに表示します。サンプルが表示されたらドロップダウンリストから「地域」を選択して[Search Jalan!]ボタンをクリックします。検索結果がグーグルマップの右側に表示されます。宿泊施設のリンクをクリックするとマップにマーカーと情報ウィンドウが表示されます。

jQueryのbubbleupプラグインでアイコンを拡大する

2010/02/26 6:25:48

このサンプルは、jQueryの bubbleup プラグインでアイコンを拡大表示します。サンプルのページに６個のアイコンが表示されたら、マウスをアイコン上に移動してください。アイコンが拡大表示されます。アイコンをクリックすると対応するサイトに移動します。

CSS3: クリックボックスギャラリー

2010/02/26 5:28:02

このサンプルは、CSS3のスタイルシートを利用してクリック型のイメージギャラリーを作成します。サンプルが表示されたら「Clickbox Gallery」をクリックしてください。イメージが表示されたらマウスをイメージの左右に移動します。[PREV]と[NEXT]のボタンが表示されますので左右のボタンをクリックしてイメージを切り替えます。イメージを閉じるには、[CLOSE]をクリックします。

Ajax: Amazonで検索した本とGoogleブックを連動させる

2010/02/25 21:13:14

このサンプルは、Amazon BooksとGoogle BooksのWebサービスを利用して検索キーワードと一致する書籍を表示します。Google Boooksで公開されているときは「Google Preview]ボタンを表示します。Previewボタンをクリックすると書籍を立ち読みできます。テーブル（表）の左上にページャーが表示されますので、[前頁][次頁]ボタンをクリックしてページングできます。

株価を折れ線グラフで表示する (LineChart)

2010/02/25 20:50:09

このサンプルは、Google Visualization APIを利用して株価を折れ線グラフで表示します。株価はYahoo! FinanceからWebサービス経由で取得します。ここでは、Yahoo!, Microsoft, Google, Oracle, IBM, Amazonの株価を表示します。折れ線グラフの●をクリックすると吹き出しに会社コードと株価が表示されます。

株価を棒グラフで表示する (BarChart)

2010/02/25 20:39:25

このサンプルは、Google Visualization APIを利用して株価を棒グラフで表示します。株価は、Webサービス経由でYahoo! Financeから取得します。ここでは、Yahoo!, Micosoft, Google, Oracle, IBM, Amazonの株価を取得して表示します。棒グラフをクリックすると、吹き出しに会社コードと株価が表示されます。

JavaScript + Ajax 新着サンプル トップ50