今回はレスポンシブデザインのサンプルをご紹介します。
主にプレゼンテーション時や自己紹介で使えそうです。
ページ内容は書き「section」の間に記述します。
サンプルでは7ページ用意しています。
背景を変更する際には、main.cssのascensorFloorXXX内を変更してください。
<html>
<head>
<meta charset="utf-8">
<title>サンプル9</title>
<meta name = "viewport" content = "user-scalable=0,width=device-width,initial-scale=1,maximum-scale=1" />
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./Buttons/css/font-awesome.min.css">
</head>
<body onresize="pageReload()" onLoad="start()" link="#ffffff" vlink="#ffffff" alink="#ffffff">
<div id="ascensorBuilding">
<!--1ページ目 ここから-->
<section id="ascensorFloor0" class="ascensorFloor">
</section>
<!--1ページ目 ここまで-->
<!--2ページ目 ここから-->
<section id="ascensorFloor1" class="ascensorFloor">
</section>
<!--2ページ目 ここまで-->
<section id="ascensorFloor2" class="ascensorFloor">
<article class="container">
<h1>工事中</h1>
</article>
</section>
<section id="ascensorFloor3" class="ascensorFloor;">
<article class="container">
<h1>工事中</h1>
</article>
</section>
<section id="ascensorFloor4" class="ascensorFloor">
<article class="container">
<h1>工事中</h1>
</article>
</section>
<section id="ascensorFloor5" class="ascensorFloor">
<article class="container">
<h1>工事中</h1>
</article>
</section>
<section id="ascensorFloor6" class="ascensorFloor">
<article class="container">
<h1>工事中</h1>
</article>
</section>
</div>
<!--フッター-->
<div id="footer">
<div id="copyright">
© フッター
</div>
</div>
<!--ナビゲーション（ぱんくずリスト）-->
<div class = "entry_more" id="entry_more">
<nav id="nav">
<ul id="nav1" style="list-style:none;text-align: center;">
<li id="li1" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 70px; right: 286px; background-color:#FFFFFF;">
<a class="ascensorLink ascensorLink0" style="vertical-align: middle;" onclick="translucentElementChange('li1');">page1</a>
</li>
<li id="li2" style="z-index: 20000; position: fixed; width: 100px; height: 22px; bottom: 70px; right: 170px; background-color:#FFFFFF;">
<a class="ascensorLink ascensorLink1" style="vertical-align: middle;" onclick="translucentElementChange('li2');">page2</a>
</li>
<li id="li3" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 70px; right: 100px; background-color:#FFFFFF;">
<a class="ascensorLink ascensorLink2" style="vertical-align: middle;" onclick="translucentElementChange('li3');">page3</a>
</li>
<li id="li4" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 70px; right: 30px; background-color:#FFFFFF;">
<a class="ascensorLink ascensorLink3" style="vertical-align: middle;" onclick="translucentElementChange('li4');">page4</a>
</li>
<li id="li5" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 30px; right: 30px; background-color:#FFFFFF;">
<a class="ascensorLink ascensorLink4" style="vertical-align: middle;" onclick="translucentElementChange('li5');">page5</a>
</li>
<li id="li6" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 30px; right: 100px; background-color:#FFFFFF;">
<a class="ascensorLink ascensorLink5" style="vertical-align: middle;" onclick="translucentElementChange('li6');">page6</a>
</li>
<li id="li7" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 30px; right: 170px; background-color:#FFFFFF;">
<a class="ascensorLink ascensorLink6" style="vertical-align: middle;" onclick="translucentElementChange('li7');">page7</a>
</li>
</ul>
</nav>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./js/jquery.ascensor.js"></script>
<script src="./js/plugins.js"></script>
<script>
function start(){
translucentElementChangeOnload('li1');
fullscreenrResizer();
}
//フルスクリーン対応 ここから
$('#ascensorBuilding').ascensor({
Navig:true,
ChocolateAscensor:true,
time: 100,
//ページ遷移のアニメーションの時間(ms)
childType: 'section',
direction:"chocolate",
overflow:"hidden",
easing: 'easeInOutQuad',
queued: false,
ascensorFloorName: ['li1','li2','li3','li4','li5','li6','li7'],
keyNavigation: true,
windowsOn: 0,
queuedDirection: "y",
//スクロールバーの非表示
ascensorMap: [[0,0],[0,1],[0,2],[0,3],[1,3],[1,2],[1,1]]
});
//フルスクリーン対応 ここまで
//ナビゲーション 画面サイズ変更、再読み込み対応 ここから
function translucentElementChangeOnload(index) {
var str = location.href;
var last = str.slice("-3");
if((last == "li1") || (last == "li2") || (last == "li3") || (last == "li4") || (last == "li5") || (last == "li6") || (last == "li7")){
index = last;
}
beforeElement = index;
var translucentElement = document.getElementById("entry_more");
translucentElement.style.opacity = 0.75;
translucentElement.style.MozOpacity = 0.75;
translucentElement.style.filter = 'alpha(opacity = 75)';
var translucentElementAct = document.getElementById(index);
translucentElementAct.style.backgroundColor = '#008000';
translucentElementAct.style.opacity = 1.00;
translucentElementAct.style.MozOpacity = 1.00;
translucentElementAct.style.filter = 'alpha(opacity = 100)';
};
var beforeElement = "";
function translucentElementChange(index) {
var translucentElementbefore = document.getElementById(beforeElement);
translucentElementbefore.style.backgroundColor = '#FFFFFF';
translucentElementbefore.style.opacity = 1.00;
translucentElementbefore.style.MozOpacity = 1.00;
translucentElementbefore.style.filter = 'alpha(opacity = 100)';
beforeElement = index;
var translucentElement = document.getElementById(index);
translucentElement.style.backgroundColor = '#008000';
translucentElement.style.opacity = 1.00;
translucentElement.style.MozOpacity = 1.00;
translucentElement.style.filter = 'alpha(opacity = 100)';
};
//ナビゲーション 画面サイズ変更、再読み込み対応 ここまで
//ブラウザの画面サイズ変更時の対応
//var reloadFlg = false;
function pageReload(){
//fullscreenrResizer();
//if(reloadFlg)window.location.reload();
//reloadFlg = true;
}
</script>
</body>
</html>
