Javascript・jQuery の記事一覧
![[JS]jQuery で画像をランダムに出力する方法](https://www.webantena.net/wp-content/uploads/2013/04/javascriptjquery.png)
jQuery を利用して、ページのアクセス毎に複数枚の画像の中からランダムで1 枚の画像を表示させる方法です。
今回は <img> タグの画像を使う場合と、CSS の background-image に背景画像を指定する場合の2種類の方法を紹介させていただきます。
続きを読む
![[JS]HTML5でマークアップする際に「html5shiv」でIE下位バージョンにも対応させる](https://www.webantena.net/wp-content/uploads/2012/10/html5.png)
HTML5 でマークアップをする場合、IE下位バージョン（8以下）がそもそもHTML5のタグが対応していない…という理由で、IE8以下でもHTML5 のタグを使えるようにするためのjavascript html5shiv.js を使う機会も多いと思います。
そこまでしてIE下位バージョンに対応させる必要があるか？については今回は置いておいて、html5shiv の簡単な取り扱い方を紹介します。
続きを読む
![[JS]シンプルなドロップダウンメニューが簡単に実装できるjQueryプラグイン「Droppy」](https://www.webantena.net/wp-content/uploads/2012/08/jquerydroppy.png)
ヘッダーのグローバルメニュー等で、マウスオーバーによるドロップダウンメニューを実現させるためのjQueryプラグイン「Droppy」。
シンプルなプラグインなので手軽に設定できますし、メニューの階層が深い場合でも入れ子のドロップダウンメニューが実装可能です。
続きを読む
![[JS]SimpleModal と jQuery Cookie による認証ボックスの実装方法](https://www.webantena.net/wp-content/uploads/2012/07/simplemodalauthbox.png)
18禁サイトのように、サイト訪問時に年齢確認などのアラートボックスを表示させ、「認証」ボタンを押したら次回のアクセス時からはアラートを出さないようにする、という処理のご紹介です。
続きを読む
![[JS]jQueryを利用して、IEで出現する「リンク画像の点線」を消す方法](https://www.webantena.net/wp-content/uploads/2012/10/focusfunctionthisblur.png)
画像をa タグでマークアップする際、
IE以外のブラウザだと問題ないですが、IEで見ると点線が出て気持ち悪いので、
jQueryを利用してフォーカスを外します。
続きを読む
![[JS]画像をオーバーレイで拡大表示させる「Lightbox 2.05」の使い方](https://www.webantena.net/wp-content/uploads/2012/07/lightbox205.jpg)
Lightbox は昔からメジャーなプラグインなので、今更説明も不要かもしれませんが…。
現在、Lightbox のバージョンは 2.5 系になっているものの、2.05 を使わざるを得ない事情が色々ありますため（その辺は記事の最後に書いてます）、改めて Lightbox 2.05 の設置方法をまとめました。
続きを読む
![[JS]IE6でも透過PNGが使えるようになるJavascript「DD_belatedPNG」](https://www.webantena.net/wp-content/uploads/2012/12/belatedpng.png)
WEBサイトを作っていると「透過画像」を使うことが多いのですが、一番の悩みは「IE6では透過画像が正常に表示されない」ので、こいつの対応をどうしてあげるか…です。> <;
IEでも7以降や他のブラウザであれば問題なく表示されますので、IE6だけに透過画像を表示させる処理を施してあげる必要がありますが、そこで便利なスクリプトが「DD_belatedPNG」です。
続きを読む
![[JS]ハッシュタグ（#）によるページ内リンクを滑らかに移動させる「smoothScroll.js」](https://www.webantena.net/wp-content/uploads/2012/12/smoothscrolljs.png)
「ページの先頭へ」などのハッシュタグ付き（#）のリンクを滑らかに動かすことができるjavascript 「smoothScroll.js」。
javascriptファイル を<head> 内に設置すれば動きますし、滑らかに動かしたくないリンクの除外設定もできますので重宝します。
続きを読む
void(0) は「何も処理しない」という時に使用します。
a タグの href 属性ではリンククリックを無効化（処理しない）して、onClick 属性に書かれたスクリプトを実行する、なんて使い方が多いと思います。
続きを読む
![[JS]画像を鏡面反射させるJavascript「reflection.js」](https://www.webantena.net/wp-content/uploads/2012/06/reflectionjs.png)
WEBをやり始めた頃は「画像が鏡面反射する」見せ方がカッコよくて頻繁に使っていたような気がします。。。
最近ではそのようなサイトデザインからもご無沙汰でしたが、とある仕事で久々に必要になったこともあって、画像の鏡面効果を演出できる javascript「reflection.js」の使い方をまとめ直しました。
続きを読む
