第4回 秘密の暗号を作ってみよう（たぬき暗号） – jQuery入門
2009 年 4 月 28 日 投稿者: naga3
不定期jQuery入門、第４回です。今回の題材は「暗号」です。使う暗号のアルゴリズムは、ドイツ軍も裸足で逃げ出したといういわくつきの超強力暗号「たぬき暗号」です。
実行結果
たぬき暗号のソース
本当なら国家機密レベルですが・・・ソースコードを公開します。ミンナニハナイショダヨ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
$(function() {
$('#answer').hover(
function() {$('span').css('display', 'none');},
function() {$('span').css('display', 'inline');}
);
});
</script>
</head>
<body>
<p>
たぬき暗号（<em id="answer">ここにマウスを重ねると解読します</em>）<br /><br />
ぼ<span>た</span>く<span>た</span>はき<span>た</span>みをあ<span>た</span>いしていま<span>た</span>す<span>た</span>。
</p>
</body>
</html>
プログラムの解説
$('#answer').hover(
function() {$('span').css('display', 'none');},
function() {$('span').css('display', 'inline');}
);
hoverメソッドは指定されたセレクタにマウスが重なったときに第１引数で指定した関数を実行し、マウスが離れたときに第２引数で指定した関数を実行します。mouseoverとmouseoutを同時に指定するような感じです。今回はセレクタ「#answer」、つまり「ここにマウスを重ねると解読します」と書かれた部分に対して、マウスが重なったときにspanタグの中身を消して、マウスが離れたときにspanタグの中身を再表示しています。
暗号文中の「た」の文字がspanで囲まれているので、マウスが重なったときに暗号が解かれるわけです・・・全ての謎は解けた！
2009 年 4 月 29 日 5:31 PM
ちょっと笑ったw
エニグマより強力・・・！
2009 年 4 月 29 日 8:35 PM
しぃーっ！消されるぞ・・・！
2009 年 5 月 26 日 2:46 PM
１１１