WPC’s ARCHIVE
‘jQuery’カテゴリーのアーカイブ
スライダーの上に、扉が開く動作(animate)を付けるjQuery
クロスフェードのスライダー上に、扉が開く動きを付けるjQueryです。 オンマウスやクリックで開くタイプではなく、読み込めば開くタイプです。 コードはとても簡単・シンプルですので、使える部分があれば参考にしてみてください […]
ブラウザ幅(ブレイクポイント)でタブメニューからアコーディオンメニューに切り替えるjQuery
スマートフォン等で閲覧した時、タブメニューからアコーディオンメニューへ、レスポンシブに変わってくれると使いやすくなりますよね。 シンプルなコードで動作しますので、備忘録を兼ねてご紹介します。
jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など
jQueryで作られたスライダー等プラグインを導入する時、 jQuery本体がないとプラグインが動作しません。 その際、jQuery本体をダウンロードしてフォルダに入れて使用(サーバにアップロード)する方法と、 Goog […]
画面幅いっぱいの横スライダー内に、更にスライダーを配置できるjQuery
横スクロールのスライダー内に、縦方向or横方向のスライダーが設置出来るプラグインを見つけたのでご紹介します。 制作者の方は「機会は少ない」と書いておられますが、十分使いドコロはあるのではないでしょうか。
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery
スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。
レスポンシブデザインでクリッカブルマップ(イメージマップ)対応にするjQueryプラグイン
レスポンシブにすると画像の大きさが変わってしまって、クリッカブルマップ(イメージマップ)の座標がズレるってことになりますよね。 少し古いプラグインですが、そんな時に使えるレスポンシブに対応するクリッカブルマップjQuer […]
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery
タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素( […]
外部リンクにtarget=”_blank”とclassを付与するjQueryで別窓アイコンを付ける
サイト内の外部リンクは別窓で表示して、横に別窓で表示的なアイコンを付けるjQueryとCSSです。 すでに書いている記事の中から、外部リンクを探してtarget=_blankやアイコンを追加するのは大変だと思った時などに […]
Webサイトなど、HTMLファイルをLightBox風に表示するjQuery
画像をクリックすると大きく表示できるLigthBox系のjqueryは、みなさんお使いのことと思います。 Webサイトなど、HTMLファイルをLightBox風に表示する機会があったので、備忘録的に紹介します。 みなさん […]
超簡単!CSSを使わず、jqueryで画像透過(ロールオーバー)する
わずか数行のコードで、画像を透過するjqueryのご紹介です。 今更感もありますが、ロールオーバーさせる為に画像を2枚用意するのが面倒な時の選択肢の一つにいかがでしょうか。