JavaScript + Ajax 新着サンプルトップ50 (build 2.0)

YouTube Data APIを利用してYouTubeの動画を検索して表示する

2011/07/06 9:36:40

このサンプルは、YouTubeのData APIとjQueryを利用してキーワードで動画を検索して結果を表示します。サンプルが表示されたら「Pick UP VIDEO」直下の検索窓に「キーワード」を入力して[Search!]ボタンをクリックしてください。検索した動画のサムネイルが表示されます。サムネイルがクリックすると動画が再生されます。「cats」の代わりに「dogs」を入力して検索してみてください。面白い動画が見れます。

TopUpプラグインでイメージ/ビデオをエフェクト付きで拡大表示する

2011/04/23 2:59:04

このサンプルは、jQueryのTopUpプラグインを利用して商品イメージと商品を説明している動画をエフェクト付きで拡大表示します。サンプルが表示されたら、「今月のオススメスイーツ」にスクロールしてスイーツのサムネイルをクリックしてください。サムネイルが拡大表示されます。拡大表示されたイメージを閉じるには右上の[X]をクリックします。[YouTube]のサムネイルをクリックするとポップアップウィンドウに動画を再生します。動画を閉じるには、右上の[X]をクリックします。ポップアップウィンドウが見づらいときは、「このサンプルを編集して試してみる」をクリックしてご覧ください。

※このサンプルは、Firefox|Chromeでご覧ください。

MultimediaPortfolioプラグインでサムネイルを左右にスライドさせて拡大表示する

2011/03/27 0:11:41

このサンプルは、jQueryのMultimediaPortfolioプラグインを利用してサムネイルを左右にスクロールさせながら拡大表示します。サンプルが表示されたら「今月のオススメスイーツ」までスクロールします。スイーツのサムネイルが表示されたらスライダーをドラッグしてサムネイルを左右にスライドさせます。サムネイルをクリックするとポップアップウィンドウに拡大表示します。拡大表示されたイメージは、イメージ上の左右の矢印ボタン（マウスをイメージ上に移動するとイメージの中央両端に表示される）をクリックして切り替えることができます。ポップアップウィンドウを閉じるには、右上の[X]をクリックします。

Gallerifficプラグインでサムネイルをタブ化して拡大表示する

2011/03/04 20:01:53

このサンプルは、jQueryのGallerifficプラグインを利用して「今月のオススメスイーツ」のサムネイルをタブ化して拡大表示します。サンプルが表示されたら「今月のオススメスイーツ」までスクロールします。左側に表示されているサムネイルをクリックすると、右側にサムネイルが拡大表示されます。サムネイルを切り替えるには、左上のタブ[1][2]をクリックします。拡大表示されたイメージを切り替えるには右上の[Previous Sweet][Next Sweet]をクリックします。イメージを自動で切り替えるには左上の[Play Slideshow]をクリックします。[Pause Slideshow]をクリックすると手動に戻ります。

jPhotoGridプラグインでイメージをグリッド上に表示してズームインさせる

2011/02/26 19:54:29

このサンプルは、jQueryのjPhotoGridプラグインを利用して「今月のオススメスイーツ」をグリッド上に表示します。サンプルが表示されたら「今月のオススメスイーツ」までスクロールします。グリッド上に表示されているスイーツをクリックするとズームインさせます。ズームインした画像をクリックするとズームアウトさせます。

InfinitCarouselプラグインでイメージを左右にスライドさせる

2011/02/19 3:57:52

このサンプルは、jQueryのInfinitCarouselプラグインを使用して今月のオススメスイーツの画像を左右にオートスクロールします。サンプルが表示されたら「今月のオススメスイーツ」まで画面をスクロールしてください。今月のオススメスイーツの画像が左右に自動的にスクロールします。画像を手動でスクロールさせるには画像の右上にマウスを移動してポーズボタン[||]をクリックします。画像中央の両端に表示されている左右の矢印ボタンをクリックすると画像をスクロール（切り替わり）します。画像の下位にキャプションが表示されていますが、このキャプションは、キャプション右上の[▼]をクリックして折りたたむことができます。[▲]をクリックするとキャプションを展開(復元)します。キャプションを消すには[X]をクリックします。

ImageCubeプラグインでイメージを3Dで回転させる

2011/02/11 14:45:46

このサンプルは、jQueryのImageCubeプラグインを利用して今月のオススメスイーツを3Dで回転させます。サンプルが表示されたら下の方にスクロールして「今月のオススメスイーツ」を表示します。左右に表示されているスイーツが上下左右に回転します。

CrossSlideプラグインでイメージをフラッシュのようにクロスフェードさせる

2011/02/04 23:48:11

このサンプルは、jQueryのCrossSlideプラグインを利用して今月のオススメスイーツをFlash(フラッシュ）のようにクロスフェードさせます。サンプルが表示されたら、画面をスクロールして「今月のオススメスイーツ」まで移動してください。今月のスイーツがクロースフェードして表示されます。スイーツのイメージは、CrossSlideプラグインにspeed、fadeオプションを追加してカスタマイズすることが可能です。

※このサンプルをフルスクリーンでご覧になりたいときは、ここをクリックして実行してください。

PopEyeプラグインでイメージをズームイン／アウトする

2011/01/29 4:22:00

このサンプルは、jQueryのPopEyeプラグインを利用してイメージをズームイン／アウトします。サンプルが表示されたら下にスクロールして「今月のオススメスイーツ」を表示します。マウスをスイーツのイメージに移動すると左上にナビゲーションメニューが表示されます。左右の矢印ボタンをクリックするとイメージを切り替えることができます。真ん中の[Enlarge]ボタンをクリックすると拡大表示します。拡大したイメージを元のサイズに戻すには[Close]ボタンをクリックします。※このサンプルは、iframeから実行していますのでFirefoxでご覧ください。その他のブラウザでは、正常に動作しない可能性があります。なお、iframeを使用しない場合、すべてのブラウザで動作します。

※このサンプルがお使いのブラウザで正常に動作しないときは、ここをクリックして実行してください。

PrettyPhotoプラグインでイメージをズームインする

2011/01/22 23:34:03

このサンプルは、jQueryのprettyPhotoプラグインを利用してお菓子のイメージをズームインします。サンプルが表示されたら画面をスクロールしてスイーツのサムネイルまで移動します。スイーツのサムネイルをクリックするとポップアップウィンドウにズームインします。ポップアップウィンドウ左下の左右の矢印をクリックするとイメージを切り替えることができます。イメージの切り替えは、ポップアップウィンドウの左右に表示されている[Prev][Next]をクリックして行うこともできます。ポップアップウィンドウを閉じるには右端の[X]をクリックします。

CSS3: アニメーション付きのスライドショー

2010/11/28 5:03:15

このサンプルは、CSS3のスタイルシートを利用してアニメーション付きのスライドショーを実装しています。サンプルが表示されたら画面最下位に表示されているサムネイルにマウスを移動してください。サムネイルにマウスを移動するとサムネイルがアニメーション化されて拡大表示されます。サムネイルの左側に表示されている番号(1-4)にマウスを移動するとサムネイルがアニメーション化されて切り替わります。サムネイルが切り替わった状態でマウスをサムネイル上に移動すると拡大表示されます。このサンプルは、Google Chrome、Safariでご覧ください。Chrome/Safariでご覧なるとイメージを切り替えたり、拡大するときにアニメーション化します。

jQueryのPanel Gallery 2.0プラグインでイメージをアニメーション化して切り替える

2010/10/23 16:06:18

このサンプルは、jQueryの Panel Gallery 2.0プラグインを利用してイメージをアニメーション化して切り替えます。このサンプルは、プラグインのデフォルトの設定を利用しています。プラグインのオプションを指定するとアニメーションをカスタマイズすることができます。

jQueryのCodaSliderプラグインでブログロールを実装する

2010/10/02 15:36:17

このサンプルは、jQueryのCodaSliderプラグインを利用してブログロール(Blogroll)を実装しています。サンプルが表示されたらタブ(PSDTUTS,...)をクリックしてメニューアイテムを切り替えます。タブの他にブログロールの最下位に表示されている[Previous][Next]のボタンをクリックして切り替えることができます。

jQueryとGoogle Search APIを利用してサイト検索機能を実装する

2010/09/25 14:40:13

このサンプルは、jQueryのgetJSON()apiとGoogle Search APIを利用して自分のサイトを検索する機能を実装しています。サンプルが表示されたら検索窓にキーワードを入力して[SEARCH]ボタンをクリックします。検索結果が８件表示されます。デフォルトで当サイト(jsajax.com)を検索します。Webを検索するには、ラジオボタンから「Search The Web」を選択します。 Webの他にイメージ、ビデオなども検索できます。

jQueryとHTML5のCanvasを利用してスライドショーを実装する

2010/09/18 15:04:01

このサンプルは、HTML5のCanvas要素とjQueryを使用してスライドショーを実装します。サンプルが表示されたらイメージの左右に表示されている矢印ボタンをクリックしてイメージを切り替えてください。このサンプルは、IE9(beta), Firefox, Safari, Chromeで動作します。IE9を使用するときは、「互換表示」を解除してIE9のネイティブモードでご覧ください。

jQueryのAPIを利用してフルページのイメージギャラリーを実装する

2010/09/09 1:23:47

このサンプルは、jQueryのAPIとCSSを利用してフルページに対応したイメージギャラリーを実装します。サンプルが表示されたら左下に表示されている任意のサムネイルをクリックします。するとサムネイルがフルページで拡大表示されます。マウスを移動するとイメージがスクロールします。拡大表示されたイメージを切り替えるには左右に表示されている矢印ボタンをクリックします。サムネイルを表示するには、画面最下位に表示されている「VIEW THUMBS」をクリックします。

jQueryのNivoSliderプラグインでiPad風のスライドショーを実装する

2010/09/04 15:26:50

このサンプルは、jQueryの NivoSlider プラグインを利用してiPad風のスライドショーを実装します。サンプルが表示されるとイメージが自動的に切り替わります。手動でイメージを切り替えるには、最下位に表示されている「○」をクリックするか、画面中央の左右に表示されている「左右」の矢印をクリックします。

jQueryのShakyMenuプラグインでメニューを振動させる

2010/08/27 14:44:01

このサンプルは、jQueryの ShakyMenu プラグインを利用してメニューを左右に振動させます。サンプルが表示されたらマウスを任意のメニューに移動してください。カレントのメニュー以外が左右に振動します。しばらくすると振動が停止します。

jQueryのCLEditorプラグインでHTMLエディタを実装する

2010/08/22 0:20:42

このサンプルは、jQueryの CLEditor プラグインでWYSIWYG HTMLエディタを実装します。サンプルが表示されたら、テキストを入力して[B],[I],[U]...などのボタンをクリックして編集してみてください。

jQueryのSmooth Div Scrollプラグインでイメージをスクロールする

2010/08/14 14:37:36

このサンプルは、jQueryの Smooth Div Scroll プラグインを利用してイメージを左右にスライドさせます。サンプルが表示されるとイメージが自動的に左側にスクロールします。イメージが終端までスクロールしたら逆方向にスクロールさせます。手動でスクロールするときは左右の矢印にマウスを移動します。マウスの位置によりスクロールするスピードを調整できます。

jQueryのMopSliderプラグインでイメージをアップルのサイト風にスライドさせる

2010/08/07 15:55:15

このサンプルは、jQueryの MopSlider プラグインを利用して Appleのサイト風にイメージをスライドさせます。サンプルが表示されたら「Any Words」のハンドルをドラッグして左右に移動してみてください。イメージが左右にスライドします。スライダー右端の切り替えボタンをクリックすると「Any Words」が「Auto」に切り替わって自動的にスライドします。

jQueryのInsetBorderプラグインでイメージのボーダーをアニメーション化する

2010/08/06 14:57:44

このサンプルは、jQueryの InsetBorder プラグインを利用してイメージのボーダーをアニメーション化します。ここでは、イメージに５種類のボーダーを表示しています。イメージにマウスを移動するとボーダーがアニメーション化します。

jQueryのYouTubeEmbedプラグインでカスタムビデオプレイヤーを表示する

2010/07/31 14:56:08

このサンプルは、jQueryの YouTubeEmbed プラグインを利用してカスタムビデオプレイヤーを表示します。サンプルが表示されたら[Click to Play]ボタンをクリックしてビデオを再生します。停止させるには動画にマウスを移動して[Click to Pause]ボタンをクリックします。それにしても、この熊賢いですね！

jQueryでサムネイルナビゲーションギャラリーを実装する

2010/07/30 15:30:50

このサンプルは、jQueryとCSSを利用してサムネイルナビゲーションギャラリーを実装しています。サンプルが表示されたら「Newest Collection」の右端に表示されてい[V]をクリックします。サムネイルの一覧が表示されたら任意のサムネイルをクリックして拡大してみてください。サムネイルにマウスを移動して左右に移動するとサムネイルがスライドします。サムネイルを閉じるには[^]をクリックします。

jQueryのBubbleEngineプラグインで泡を発生させる

2010/07/20 5:27:49

このサンプルは、jQueryの BubbleEngine/BubbleMachine プラグインを利用して泡を発生させます。泡はバブルマシンが発生させます。サンプルが表示されると２台のバブルマシンから泡がでます。 [Add a new Bubble Machine]ボタンをクリックすると、バブルマシンを追加します。泡の種類は「Type」から選択することができます。１番目のタイプを選択するとハート型の泡がでます。３番目のタイプを選択するとツイッター型の泡がでます。２番目のタイプを選択すると、通常の泡ができます。泡の大きさはスライダーで変えることができます。バブルマシンとコントールパネルは、ドラッグして任意の場所に移動することができます。

jQueryのjYouTubeプラグインでビデオのサムネイルを取得する

2010/07/18 14:13:01

このサンプルは、jQueryの jYouTube プラグインを利用してYouTubeのビデオのサムネイルを生成して表示します。サンプルが表示されたら、テキストボックスにビデオのURLを入力して[Get Thumbnail]ボタンをクリックします。テキストボックスのURLを書き換えて試してみてください。

jQueryのdragsortプラグインで要素を並べ替える

2010/07/18 13:53:25

このサンプルは、jQueryの DragSort プラグインで要素をドラッグしながら並べ替えることができます。サンプルが表示されたら、「Simple 1D list」のアイテムをドラッグして並べ替えてみてください。「2D list with drag and drop between lists」では、２つのリストボックス間でアイテムを移動することができます。さらに、移動したアイテムはリスト内で並べ替えることができます。

jQueryのloopedSliderプラグインでイメージをスライドさせる

2010/07/17 14:31:15

このサンプルは、jQueryの loopedSlider プラグインでイメージを自動的にスライドさせます。サンプルが起動すると、2.5秒後にイメージが自動的にスライドします。イメージの下にカレントの位置が●で表示されます。手動でイメージを切り替えるときは、左右の矢印ボタンをクリックします。

jQueryのJQnoticeプラグインでメッセージを表示する

2010/07/17 14:08:05

このサンプルは、jQueryの JQnotice プラグインを利用してウェブページにメッセージを表示します。サンプルが起動したら「Click me」をクリックしてみてください。すると、ウェブページの最上位にメッセージが表示されます。メッセージは、JQnotice()プラグインの引数に指定します。メッセージは2秒後に自動的に消えます。メッセージを消すとき、animate()apiでアニメーション化しています。

jQueryでTwitterのつぶやきを無制限にスクロールして表示する

2010/07/16 14:01:14

このサンプルは、jQueryでTwitterのapiを利用して特定のユーザー(私の）つぶやきを表示します。スクロールバーをドラッグしてつぶやきをドラッグするとTwitterのapiを実行して次のつぶやきを表示します。この処理を繰り返して無制限につぶやきを表示します。「このサンプルを編集して試してみる」をクリックしたら、usernameの変数にご自分のTwitterのユーザー名を設定して実行してみてください。

jQueryのCatch404プラグインでリンク先が見つからないときポップアップにユーザーフレンドリーなメッセージを表示する

2010/07/15 14:40:21

このサンプルは、jQueryの Catch404 プラグインを利用してリンク先が存在するかチェックします。そして、リンク先が見つからないときは、ポップアップウィンドウにユーザーフレンドリーなメッセージを表示します。サンプルが起動すると３個のボックスが表示されます。左端のボックスは内部リンクが見つからない、真ん中のボックスは外部リンクが見つからない、右側のボックスは正常な外部リンクになっています。それぞれのボックスのリンクをクリックしてみてください。リンク先が見つからないときは、ポップアップにメッセージが表示されます。

複数のjQueryライブラリを同時に使用するには

2010/07/14 14:13:27

このサンプルは、複数のjQueryライブラリを同時にロードして個別のライブラリを利用します。ここで紹介しているテクニックは、jQueryのプラグインがjQueryのバージョンに依存するときに利用すると便利です。jQuery 1.4.2をデフォルトのライブラリとするときは、 var jQuery142 = $.noConflict(true); が不要です。

jQueryのCalculartorプラグインでテキストボックスに電卓を組み込む

2010/07/13 14:28:30

このサンプルは、jQueryの Calculator プラグインを利用してテキストボックスに電卓を組み込みます。サンプルが表示されたらテキストボックスにフォーカスを移動してください。テキストボックスの右端に表示されている電卓のアイコンをクリックして表示することもできます。電卓がドロップダウン表示されますので、計算したら[USE]ボタンをクリックします。 IEのときは「このサンプルを編集して試してみる」をクリックして検証してください。

jQueryのCaretプラグインでMS Word風のミニバーを表示する

2010/07/12 14:54:09

このサンプルは、jQueryのCaretプラグインを利用してMS Word風のミニバーを表示します。サンプルが表示されたらテキストエリアの単語をドラッグして選択してください。マウスをリリースすると右上のミニバーが表示されますので「b i u Link」から選択します。たとばえ、[b](bold)を選択すると、Previewに選択した単語が太字で表示されます。

jQueryのAnimated Table Sortプラグインで表をアニメーション化して並べ替える

2010/07/11 13:45:08

このサンプルは、jQueryの Animated Table Sort プラグインを利用して表(table)の列をアニメーション化して並べ替えます。サンプルが表示されたら表の見出し（Place, County, Phone code, Population)をクリックしてください。クリックした見出しの列をアニメーション付きで並べ替えします。

jQueryのLike it? Tweet it!　プラグインを利用して訪問者がその場でつぶやきができるようにする

2010/07/10 23:41:52

このサンプルは、jQueryの Like it? Tweet it! プラグインを利用してサイト訪問者がその場でつぶやきができるようにしています。サンプルが表示されたら「Tweet this」のリンクをクリックします。すると画面右下に「Like it? Tweet it!」のダイアログが表示されます。 Twitterに接続されていないときは[Connect with Twitter]ボタンをクリックして接続します。ログイン画面が表示されたらあなたのTwitterの「ユーザー名／メールアドレス」と「パスワード」を入力して[Connect]ボタンをクリックします。 Twitterに接続されるとダイアログに文章が入力できるようになります。ダイアログには、このページのリンクが生成された状態になっていますのでリンクの入力は不要です。本文のみ入力してください。ダイアログ右下の[Tweet!]ボタンをクリックすると登録します。試しに、ご自分のTwitterのアカウントでログインしてつぶやいてみてください。念のため、このページへのリンクは自動的に生成されていますので本文のみ入力してください。 ※IEの場合、「このサンプルを編集して試してみる」をクリックして検証してください。

jQuery UIのDialogプラグインを利用して外部サイトのコンテンツを表示する

2010/07/10 14:23:21

このサンプルは、jQuery UIのDialogプラグインを利用してダイアログに外部サイトのコンテンツを表示します。サンプルが表示されたら「Goolge」「jQuery」「jQuery UI」のリンクをクリックしてください。ダイアログが開いてウェブサイトのコンテンツが表示されます。ダイアログはリサイズすることができます。

jQueryのFlipプラグインを利用して最新のつぶやきを表示する

2010/07/10 14:09:47

このサンプルは、jQueryの Flip プラグインを利用してTwitterの最新のつぶやきを表示します。サンプルが表示されたらテキストボックスのTwitterのUser Nameを入力して[Submit]ボタンをクリックします。Twitterのアカウントがない方は[Submit]ボタンをクリックしてください。するとボックスがフリップして最新のつぶやきが表示されます。[Return]をクリックすると元のボックスに戻ります。

jQueryのライブラリをGoogle CDNからロードするときリスクをゼロにする

2010/07/09 15:06:45

このサンプルは、jQuery 1.4.2のライブラリをGoogle CDN(Content Delivery Network)からロードして高速化しています。このとき、Google CDNがダウンしてjQueryのライブラリがロードできない場合でも正常に動作するように、自動的にアプリケーションが動作しているウェブサーバーからライブラリをロードします。 Googel/MicrosoftのCDNを利用するときは、ぜひこの機能を組み込んでおくことをお勧めします。このサンプルを検証するには、「このサンプルを編集して試してみる」をクリックします。そして、http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js のscriptタグを削除して実行してみてください。「Welcome to jQuery...」が表示されればＯＫです。

jQueryのImagineMenuプラグインでイメージを使用したメニューを実装する

2010/07/08 15:14:52

このサンプルは、jQueryの ImagineMenu プラグインを利用してイメージを使用したメニューを実装しています。イメージはCSS Spriteを使用して表示します。

jQueryのMultiSelectプラグインでドロップダウンリストから複数のアイテムを選択する

2010/07/08 14:36:25

このサンプルは、jQueryの MultiSelect プラグインを利用してドロップダウンリストから複数のアイテムを選択することができます。サンプルが表示されたらドロップダウンリストのヘッダーをクリックします。するとアイテムがドロップダウンに表示されますのでマウスでクリックして選択します。「Check all」「Uncheck all」をクリックするとすべてのアイテムを選択／非選択します。下のドロップダウンは、アイテムをグループ単位で表示します。グループ名をクリックすると、グループ内のすべてのアイテムを選択／非選択できます。

jQueryでボタンをアニメーション化してコンバージョンを上げる！

2010/07/07 16:15:07

このサンプルは、jQueryの Animate Shadow プラグインを利用してボックスをアニメーション化します。サンプルが表示されたらボタンにマウスを移動してみてください。３番目のボタンをクリックするとバウンスします。 ※このサンプルは、IE以外でご覧ください。IE9 Previewでは、正常に動作するはずです。

jQueryのTextTranslateプラグインを使用してワンクリックで任意の言語に翻訳する

2010/07/07 14:22:35

このサンプルは、jQueryの TextTranslate プラグインを利用して任意の言語の文章を日本語などに翻訳することができます。サンプルが表示されたらパラグラフの先頭に表示されている「Translate this]のアイコンをクリックします。ポップアップが表示されたら、ドロップダウンリストから翻訳したい言語を選択します。たとえば、日本語に翻訳するときは「Japanese」を選択します。パラグラフ１と２は英語、パラグラフ３はデンマーク語で記述されています。

jQueryでグリッド型のサムネイルを表示するスライドショー

2010/07/06 14:45:21

このサンプルは、jQueryのanimte apiとcssを利用してスライドショーを実装しています。サンプルが表示されるとイメージが自動的にスライドします。マウスをイメージ上に移動すると右下にナビゲーションバーが表示されますので、手動でイメージを切り替えるたり、自動切り替えを一時停止することができます。ナビゲーションの左端のグリッドボタンをクリックするとイメージの上位にグリッド型のサムネイルを表示します。サムネイルをクリックすると拡大表示します。サムネイルは左右の矢印ボタンをクリックしてスライドさせることができます。[▲]をクリックするとグリッド型サムネイルを閉じます。

jQueryで花火をうちあげる

2010/07/05 14:39:44

このサンプルは、jQueryのanimate apiを利用して夜空に花火をうちあげます。サンプルが表示されると夜空に３秒間隔で花火が打ち上げられます。打ち上げる間隔は、setIntervalの時間を書き換えます。花火の大きさは「emitter.duplicate(50)」の引数50を書き換えます。

jQueryのfacyboxプラグインでイメージを拡大する

2010/07/04 14:19:59

このサンプルは、jQueryの facybox プラグインを利用してサムネイルをズームインします。サンプルが表示されたら3番目のボックスに表示されているサムネイルをクリックしてください。ウィンドウが表示されてサムネイルがズームインされます。２番目のボックスの[Open gallery]をクリックすると、イメージを順番にウィンドウに表示します。イメージがズームインされた状態でマウスを移動すると左右の矢印ボタンが表示されますので、このボタンをクリックしてイメージを切り替えます。１番目のボックスから[View...]をクリックするとイメージを表示します。 ※このプラグインは Fancybox とは異なります。スペルミスではありません、facyboxです。

MooToolsのfloomプラグインを利用してイメージをスライドさせる

2010/07/03 14:27:42

このサンプルは、MooToolsの floom プラグインを利用してイメージをスライドさせます。サンプルが表示されるとイメージが左側からセクション化されて徐々に切り替わります。 jQueryにも同じようなプラグインがありますが、今回はイメージが気に入ったの久しぶりにMooToolsのプラグインを取り上げました。

jQueryで写真をランダムに並べ替える

2010/07/01 14:47:33

このサンプルは、jQueryとCSS3を利用して写真をランダムに並べ替えします。サンプルが起動すると写真をランダムに並べ替えた状態で表示します。写真はドラッグして移動したり、クリックして前面／背面に入れ替えできます。 [View All]をクリックするとすべての写真を重ねて表示します。写真を切り替えるには、写真中央にマウスを移動して切り替えボタンをクリックします。 [Shuffle]をクリックするとランダムに並べ替えします。写真右上の[X]をクリックするとディスク上から削除します。

※このサンプルはIE以外でご覧ください。

jQueryでイメージの角に丸みを付ける

2010/07/01 3:23:34

このサンプルは、jQueryとCSS3を利用してイメージの角に丸みを付けます。上段の例はCSS3のもで実装しています。下段の例はjQueryで実装しています。このサンプルは、Firefox, Chrome, Safariでご覧ください。

jQueryでMac風のアイコンドックを表示する

2010/06/29 14:48:53

このサンプルは、CSSとjQueryを利用してMac風のアイコンドックを表示します。マウスをアイコンに移動するとアイコンがドックから飛び出します。そして、アイコンからマウスを遠ざけるとアイコンがドックに戻ります。ここでは、CSS版とjQuery版を用意しました。 jQueryでアイコンを拡大するときanimate()を使用しています。

JavaScript + Ajax 新着サンプル トップ50 (build 2.0)