jQuery Inline Footnotes

JavaScript

ホバーで脚注を表示できる「jQuery Inline Footnotes」

jQuery Inline Footnotesはホバーすることで脚注のコンテンツをインラインで表示できるjQueryプラグインです。設定した特定のポイントにホバーすることで、わざわざページ下部などにある脚注までスクロールしなくてもその場所で脚注のコンテンツを確認できるのでとても便利ですね。

jQuery Inline Footnotes

デモ

デモでは脚注の1または2と書かれている数字にホバーすると、ページ下部にある脚注がホバーしたその場所に表示されます。アニメーションなどは特になく、脚注を確認したい時にパッと表示してくれるのでとても便利ですね。

長文記事などで、脚注を見るためにわざわざページ下部などまで行かなくてもいいので集中力を切らすことなく記事を読み進めていけそうです。

使い方もかなりシンプルで、手軽に実装できるのもグッドです。また、jQuery Inline Footnotesにはオプションもいくつか用意されています。主なオプションは、boxMargin、hideDelay、hideFromContent、maximumBoxWidth、boxIdです。各オプション項目のデフォルト値は、boxMarginが20、hideDelayが200、hideFromContentが”[rev=footnote]”、maximumBoxWidthが500、boxIdが”footnote_box”になります。

サポートブラウザは、IE 6.0+、Firefox 2.0+、Safari 3.0+、Opera 9.0+、Chromeとのこと。

jQuery Inline Footnotes

関連記事

  1. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  2. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  3. Impulse Slider

    JavaScript

    3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

    Impulse SliderというjQueryプラグインを使えば3Dス…

  4. Animated Page Transition
  5. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP