単調にポンと地図を置くのが気に食わなくてちょっと変わったことをしたかった。
まぁ大した動作じゃないけど。
スクリプトが思たより短文で済んだ。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>都道府県スライダー</title>
<script type="text/javascript" src="http://moneymo.jp/js/jquery.js"></script>
<script type="text/javascript" src="http://moneymo.jp/js/jquery.easing.js"></script>
<style type="text/css">
* {
margin: 0 auto;
}
ul.map {
list-style: none;
}
ul.map li {
position: absolute;
padding-left: 500px;
opacity: 0;
}
ul.map li:hover {
color: #C00;
}
ul.map li a {
display: block;
}
li.pref01 { margin: 0 0 0 590px; }
li.pref02 { margin: 58px 0 0 590px; }
li.pref03 { margin: 83px 0 0 641px; }
li.pref04 { margin: 108px 0 0 641px; }
li.pref05 { margin: 83px 0 0 590px; }
li.pref06 { margin: 108px 0 0 590px; }
li.pref07 { margin: 133px 0 0 590px; }
li.pref08 { margin: 158px 0 0 641px; }
li.pref09 { margin: 158px 0 0 590px; }
li.pref10 { margin: 158px 0 0 539px; }
li.pref11 { margin: 183px 0 0 590px; }
li.pref12 { margin: 183px 0 0 641px; }
li.pref13 { margin: 208px 0 0 590px; }
li.pref14 { margin: 208px 0 0 539px; }
li.pref15 { margin: 133px 0 0 488px; }
li.pref16 { margin: 158px 0 0 437px; }
li.pref17 { margin: 133px 0 0 386px; }
li.pref18 { margin: 158px 0 0 386px; }
li.pref19 { margin: 183px 0 0 539px; }
li.pref20 { margin: 158px 0 0 488px; }
li.pref21 { margin: 183px 0 0 437px; }
li.pref22 { margin: 208px 0 0 488px; }
li.pref23 { margin: 208px 0 0 437px; }
li.pref24 { margin: 233px 0 0 437px; }
li.pref25 { margin: 183px 0 0 386px; }
li.pref26 { margin: 183px 0 0 335px; }
li.pref27 { margin: 208px 0 0 335px; }
li.pref28 { margin: 183px 0 0 284px; }
li.pref29 { margin: 208px 0 0 386px; }
li.pref30 { margin: 233px 0 0 335px; }
li.pref31 { margin: 183px 0 0 233px; }
li.pref32 { margin: 183px 0 0 182px; }
li.pref33 { margin: 208px 0 0 233px; }
li.pref34 { margin: 208px 0 0 182px; }
li.pref35 { margin: 183px 0 0 131px; }
li.pref36 { margin: 268px 0 0 233px; }
li.pref37 { margin: 243px 0 0 233px; }
li.pref38 { margin: 243px 0 0 182px; }
li.pref39 { margin: 268px 0 0 182px; }
li.pref40 { margin: 183px 0 0 70px; }
li.pref41 { margin: 183px 0 0 19px; }
li.pref42 { margin: 208px 0 0 19px; }
li.pref43 { margin: 233px 0 0 19px; }
li.pref44 { margin: 208px 0 0 70px; }
li.pref45 { margin: 233px 0 0 70px; }
li.pref46 { margin: 258px 0 0 19px; }
li.pref47 { margin: 148px 0 0 19px; }
</style>
</head>
<body>
<ul class="map">
<li class="pref01">北海道</li>
<li class="pref02">青森</li>
<li class="pref03">岩手</li>
<li class="pref04">宮城</li>
<li class="pref05">秋田</li>
<li class="pref06">山形</li>
<li class="pref07">福島</li>
<li class="pref08">茨城</li>
<li class="pref09">栃木</li>
<li class="pref10">群馬</li>
<li class="pref11">埼玉</li>
<li class="pref12">千葉</li>
<li class="pref13">東京</li>
<li class="pref14">神奈川</li>
<li class="pref15">新潟</li>
<li class="pref16">富山</li>
<li class="pref17">石川</li>
<li class="pref18">福井</li>
<li class="pref19">山梨</li>
<li class="pref20">長野</li>
<li class="pref21">岐阜</li>
<li class="pref22">静岡</li>
<li class="pref23">愛知</li>
<li class="pref24">三重</li>
<li class="pref25">滋賀</li>
<li class="pref26">京都</li>
<li class="pref27">大阪</li>
<li class="pref28">兵庫</li>
<li class="pref29">奈良</li>
<li class="pref30">和歌山</li>
<li class="pref31">鳥取</li>
<li class="pref32">島根</li>
<li class="pref33">岡山</li>
<li class="pref34">広島</li>
<li class="pref35">山口</li>
<li class="pref36">徳島</li>
<li class="pref37">香川</li>
<li class="pref38">愛媛</li>
<li class="pref39">高知</li>
<li class="pref40">福岡</li>
<li class="pref41">佐賀</li>
<li class="pref42">長崎</li>
<li class="pref43">熊本</li>
<li class="pref44">大分</li>
<li class="pref45">宮崎</li>
<li class="pref46">鹿児島</li>
<li class="pref47">沖縄</li>
</ul>
<script type="text/javascript">
var n = 0;
var prefshower = setInterval( function () {
$("ul.map li").eq(n).animate({
"padding-left": "300",
"opacity": "1"
}, 300
);
n = n + 1;
if (n <= $("ul.map").children.length) {
clearInterval;
}
}, 10);
</script>
</body>
</html>