文字を隠すように貼るシールを表現するJavaScript
スポンサード リンク

なんとも一風変わった遊び心。
その仕掛けは単純だけど、アイデア次第では面白い事が出来そうですね。
サンプルデモはこちら
使い方は以下に。
まずはダウンロードから
ダウンロードするものは下記の3つのJsファイルです。

ダウンロードはこちら

ダウンロードが終了してファイル名を見ると、妙な名前で保存されているので、今回は名前を変更して使います。
上記のファイル名より上部の名前をすべて消します。
その時、次のような下の部分だけを残し、消します。

下記のような呼び出しを付ける。
<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>
以上です。
新ブログ:ITクオリティもよろしく。
スポンサード リンク
![]() |
![]() |
![]() |

» Photoshopちょいテク『惑星を作ってみよう』+360度パノラマ画像も作れるように
» 最近、ブログを書いている途中に筆が止まる理由がわかった気がする
» ブログエントリ別に見る『注目度10の法則』
» 天才という言葉は、生きている人にいう言葉じゃない気がする
» まるでphotoshop!JavaScriptで実装するクールなカラーピッカー[prototype.js]
» 今後の期待度が高いphotoshopブラシまとめサイト『Quality Brushes for Photoshop』
» FLASHサイト作成インスピレーションの参考になるflashサイト7つ
» あの時、何気なく吸い始めた一本のタバコの値段が900万だと知ったとき
» jQueryサンプル公開後の反省会。みなさんからのアドバイスを5本サンプル化
» [追記]数百件先の画像まで一気に検索してしまうインターフェイスを搭載したfirefoxアドオン
» プロとアマの違いってぶっちゃけたったひとつ
» 一晩で覚えるjQueryの逆引き基礎サンプル7つ
» あなたは大丈夫?知らず知らずのうちに感じている10のパソコンストレス
» よごれた感じのフォトショップチュートリアルとブラシ
» 第2回web開発者インタビュー。マチウケメール便開発者『開発環境はeclipseです!』
Comment
ファイル名を変更する必要はありますか?拡張子の区切り以外の場所にも「.」は問題なく使用できますよ?
それに元ファイルがそういう命名になっているのはちゃんと理由があります。jqueryのプラグインはそのように「jquery.***.js」というファイル名にするように、というガイドラインがあります。
トラックバックURL
links for 2007-08-10
文字を隠すように貼るシールを表現するJavaScript*ホームページ... READ MORE ...
from World Invaders - 2007/08/10
Javascriptライブラリ&Tips紹介記事のまとめ
以下の記事にて、グラフィック関連、グラフ関連、カレンダー関連、エフェクト関連な... READ MORE ...
from 仕事の効率を上げる blog - 2007/08/16












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