画像のキャプションを画像から飛び出るように表示するJavaScript「jQuery Drop Captions Plugin」

画像にキャプションを付けることでユーザーに配慮することが可能です。
JavaScriptライブラリのjQueryプラグインのjQuery Drop Captions Pluginを使用すると、画像から飛び出すようにキャプションを表示できます。

使用方法

jQuery Drop Captions Pluginからファイルをダウンロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.dropcaptions.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
  $('.class名').dropCaptions({
	 showSpeed: 2000, //表示スピード
	 hideSpeed: 1000, //隠すスピード
	 showOpacity: 1, //表示する時の透明度
	 hideOpacity: 0, //隠す時の透明度
	 showEasing: 'easeOutElastic', //表示時の動き
	 hideEasing: 'easeInQuint', //隠すときの動き
	 hideDelay: 2000 //隠れるまでの時間
  });
});
</script>

あとはimgに指定したclassを付与するとtitle属性の中身が表示されます。
<img title="ここは画像のキャプションです。" src="画像パス" class="class名" />

サンプル

これは画像のキャプションです。これは画像のキャプションです。これは画像のキャプションです。これは画像のキャプションです。これは画像のキャプションです。

Javascriptサンプルページ一覧

skuare.net