カテゴリ：Javascript

スクロールに関する演出を調べたので、調べたものに使用しているプラグインと実装方法のメモです。

なお、デモについてはFirefoxで確認してますので他のブラウザではずれてる場合があるかもしれません。

JavaScriptで作った配列の順番を特定の順番に入れ替えたい時があったので、ソートして入れ替える方法を調べました。

画像などをクリックすると拡大画像をふわっと表示してくれる、いわゆるLightBox風のjQueryのプラグイン、「fancyBox」ですが、 これをページを開いた時にすぐ実行する方法を調べたので書いておきます。

サイトを作る際に要素を画面のとある位置に固定して配置したい時に使うposition: fixed;ですが、 ご存知の通り、IE6では使用できません。だからといってIE6のシェアも下がってきているなか複雑になる対策をしたくもないので、 jsでサックリ実装したくて探していたのですが、動作がよいものを見つけたのでご紹介です。

スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。
Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。

サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、 Youtubeの埋め込みを使って表示する事があるかと思います。
この際にJavaScriptを使って制御ができるYouTube JavaScript Player APIというものがあり、設置をしたので そちらの実装方法のメモです。
これを使うと自分が作ったボタンで再生や停止が出来るようになります。（他にもいろいろ出来ると思います）

スマートフォンかどうかを判断するJavascriptの条件分岐です。

少し前になりますが、jQueryで面白いプラグインが紹介されてましたので、そちらを使って 東京の地下鉄（東京メトロ・都営地下鉄）の路線図を作成してみました。

いろいろ調べたので、メモ。ページを表示したら一定時間後に目的の位置までスクロールするjQueryを使ったJSです。

IE6でpng画像にロールオーバーする時に動かなかったので、そのときに調べたことのメモ。
JSの記述を書き換えれば動くようになりました。

全画面のFlashサイトがありますが、Flashのサイズが大きいと画面サイズによっては 見えなくなる領域もできます。Flash内でスクロールできれば問題はないのですが、ブラウザのスクロールバーをだしたい時ようのメモです。

以前にもiPhoneサイトを作成するさいに便利なjQueryプラグイン「jQTouch」をご紹介しましたが、 他にも便利そうなものを見つけたのでご紹介。「iUI」です。

テーブル（表）を使うとき、見やすいよう交互に色を付ける事が多いかと思います。その際、HTML側に交互にclassをつけていく方法ではとても大変です。 また、更新が入った時はまたclassをつけなおさないといけなくなります。

この方法を知る前は、一つ一つclassをつけなおして大変でした・・・

以下にjavascript（jQuery）とCSSを使って自動的に交互に色を付ける方法をメモしておきます。

テキストや画像などをクリックすると隠れていたコンテンツがでてくるアコーディオンのサンプルをjQueryを使って作成しました。 もっと汎用的なものが他にあると思いますが、検索で調べるものは自分には複雑だったりするので・・・

IE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれるie7.js

これだけ聞くととても便利そうですが、バグがあったりしてなかなか思い通りにいかないこともあります

画像を拡大をJavascriptを使って行えるものをご紹介します。

自分のサイト以外にリンクをはる場合、そのリンクは別のウインドウで開いてもらいたいことがあると思います。

jQueryを使って画像をロールオーバーする方法のclassなどを指定せず画像の名前だけで、ロールオーバーする方法です。

jQueryを使って画像をロールオーバーする方法は、いろいろあると思いますが今回はclassを指定して使用する方法をご紹介します。

奥行きのある回転ができるjavascriptのjQuery Roundaboutを試してみました。

iPhoneページ製作用ｊQueryプラグイン「jQTouch」をご紹介します。

ページスクロールのJSで、上に戻るだけではなくてアンカーリンクの移動はすべてスクロールがつくJSのご紹介です。

スライドスクロールページ内リンク jQuery.slideScroll.jsCommentsAdd Star

jQueryとはjavascriptのライブラリの1つです。導入することによって簡単にjavascriptが扱えます。

まずはjQueryのダウンロード。

http://docs.jquery.com/Downloading_jQuery

Current Releaseが最新のバージョンになります。