ホームページを作る人のネタ帳

文字を隠すように貼るシールを表現するJavaScript

シール
なんとも一風変わった遊び心。
その仕掛けは単純だけど、アイデア次第では面白い事が出来そうですね。

サンプルデモはこちら

使い方は以下に。

まずはダウンロードから


ダウンロードするものは下記の3つのJsファイルです。
ダウンロード
ダウンロードはこちら




200708092259.gif

ダウンロードが終了してファイル名を見ると、妙な名前で保存されているので、今回は名前を変更して使います。

上記のファイル名より上部の名前をすべて消します。
その時、次のような下の部分だけを残し、消します。
Java

下記のような呼び出しを付ける。

<script type='text/javascript' src='pack.js'>/* jquery core */</script>
<script type='text/javascript' src='min.js'></script>
<script type='text/javascript' src='jquery.js'>/* plugin code */</script>


下のコードもサンプルに書いてあったので書いておく。

<style type='text/css'>
body {
background-color: #fff;
}
pre {
background-color: #f0f0f0;
overflow: auto;
border: 1px dashed black;
padding: 0 1em 1em 1em;
}
</style>
<style type='text/css' id='EmbeddedStyleSheet'>
.jqSpoiler {
background-image:url(spoilers.png);
border:1px solid red;
color: green;
}
.jqSpoiler span {
visibility: hidden;
}
.jqSpoiler.reveal {
background-image: none;
border: none;
}
.jqSpoiler.reveal span {
visibility: visible;
}
</style>
<script type='text/javascript' id='DemoPageScriptSourceCode'>
$(document).ready(function(){
// On-hover spoiler:
$('.jqSpoiler').initSpoilers();
// On-hover spoiler using hoverIntent plugin:
$('.jqSpoilerIntent').initSpoilers({method:'hoverIntent'})
.addClass('jqSpoiler');
// Clickable spoiler:
$('.jqSpoilerClick').initSpoilers({method:'click'})
.addClass('jqSpoiler');
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#DemoPageScriptSourceCodePre').text( $('#DemoPageScriptSourceCode').text() );
$('#DemoPageStyleSheetSource').text( $('#EmbeddedStyleSheet').text() );
});
</script>


上のコードはもちろんbodyの前、に書いておく。
オレンジ色の部分はシールに使う画像の指定。

とりあえずサンプルデモページの下のほうにあるので拾ってきます。

最後にサンプルデモの1~3までの記述方法。

1>> 
<span class='jqSpoiler'><span>This text should be hidden if you are not mouse-overing it.</span></span>

2>> 
<span class='jqSpoilerIntent'><span>This text should be hidden if you are not mouse-overing it.</span></span>

3>> 
<span class='jqSpoilerClick'><span>This text should be hidden until you click on it.</span></span>

以上です。
@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 2

There are no comments yet.

名前を名乗れない人  

わー、楽しそう!

もんたメソッドですね。
HTMLでのプレゼンに使えそうです。画像を2.3種類用意して使い分けするとよさそう。文字なんか書いたりして・・・。
おお!どんどん膨らんできます。これからやってみます。

2007/08/10 (Fri) 23:57

名前を名乗れない人  

ファイル名を変更する必要はありますか?拡張子の区切り以外の場所にも「.」は問題なく使用できますよ?

それに元ファイルがそういう命名になっているのはちゃんと理由があります。jqueryのプラグインはそのように「jquery.***.js」というファイル名にするように、というガイドラインがあります。

2007/08/12 (Sun) 04:37

Leave a reply