2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
【★★★ - ｊＱｕｕｅｒｙ】 - クリックで開くアコーディオンメニュー
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"
document.write()－JavaScriptリファレンス
writeメソッドは、ドキュメントに文字列を書き出します。 タグを書き出すこともできるので、例えば<IMG>タグを書き出してページ上に画像を表示させたりすること可能です。 尚、ドキュメントの出力を開始したあと、 document.close() で明示的にドキュメントの出力を終了しないと、書き出した文字列が表示されないことがあるので注意してください。 ■使用例 HTML + JavaScriptソース <html> <head> </head> <body> <script> document.open(); document.write("文字列を書き出します。"); document.write("<img src='../images/img002.gif'>"); document.close(); </script> </body> </html>
複数の画像リンクからランダムに1つを表示 - ［ホームページ作成］All About
ウェブページが表示されるたびに、ランダムに選ばれた画像が1つ表示され、クリックするとその画像に対応するページに移動できるような機能を作ってみましょう。 たくさんある「お勧めコーナー紹介画像」の中からランダムに1つを掲載したり、お勧めの写真をランダムに1つ紹介したりしたい場合などに活用できます。リンク先は自サイト内に限らないので、お気に入りサイトの中から1つを選んで紹介する用途などにも使えます。 下図は、複数の画像リンクの中からランダムに1つを選んで表示するページの作成例です。ブラウザで実際に表示確認をしてみるには、「ランダム画像リンクを作る」サンプルページをご覧下さい。 上記のサンプルページの枠内には、花のイラストが1つだけ表示されています。ページを表示するたびに、異なる画像が表示されます。また、画像と一緒にリンク先も変化しています。 ※ランダムに選ばれた結果、たまたま前回と同じ画像が出る
ツリーメニュー - JavaScript
サンプルと機能 → Sample 1：ツリーメニュー → Sample 2：階層付きツリーメニュー 文字をクリックされると、その下にメニューを表示します。 階層はいくつでも増やすことができます。 Netscape Navigatorには対応していません。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 → Sample 1：ツリーメニュー <HTML> <HEAD> <TITLE></TITLE> <STYLE> a:link {text-decoration:none;} a:visited {text-decoration:none;} a:active {text-decoration:none;} a:hover
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
