テキストを隠してしまうjavascript「Spoilers」

画像はjavascriptやCSSでロールオーバー時に表示するものを変更することができ、閲覧者の好奇心をくすぐることができます。
一方で、HTMLのテキストではできませんでした。
wanderinghorse.netでは、背景画像でテキストを隠せるSpoilers pluginを公開しています。
spoilers

使用方法
Spoilers pluginからsgbeal-spoilers.jquery.jsをダウンロードします。
さらに、javascriptライブラリのjQueryが必要になります。(jquery.js
head内には以下のscriptとCSSを書きます。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/sgbeal-spoilers.jquery.js" type="text/javascript"></script>
<style type='text/css' id='EmbeddedStyleSheet'>
.jqSpoiler {
background-image:url(画像URI);
border:1px solid #000000;
}
.jqSpoiler span {
visibility: hidden;
}
.jqSpoiler.reveal {
background-image: none;
border: none;
}
.jqSpoiler.reveal span {
visibility: visible;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// シンプルver.
$('.クラス名').initSpoilers();
// クリックver.
$('.クラス名').initSpoilers({method:'click'})
.addClass('jqSpoiler');
});
</script>

最後に隠していテキストをspanで囲めば完成です。
<span class='クラス名'><span>隠すテキスト</span></span>
テキストを隠してしまうjavascript「Spoilers」サンプル

sponsors

「テキストを隠してしまうjavascript「Spoilers」」をシェアする

記事作成:
記事URL:

TOP > > > テキストを隠してしまうjavascript「Spoilers」