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

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

sponsors

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

記事作成:
記事URL:

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