分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)[/
分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)
这篇文章介绍了如何使用幻灯方式来进行全屏幕页面导航，包括了16个幻灯，4个一行，一共4行。并且通过了CSS3箭头添加了动画导航效果。而且提供一个迷你的导航条能够帮助用户记录访问过的幻灯页面。希望大家喜欢！
HTML标签<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fullscreen Javascript Slide navigation | Script Tutorials</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">
<script src="js/main.js"></script>
</head>
<body>
<div class="container" id="container">
<div id="pages">
<div id="page1">
<a href="#page2" class="go right"></a>
<a href="#page5" class="go bottom"></a>
</div>
<div id="page2">
<a href="#page1" class="go left"></a>
<a href="#page3" class="go right"></a>
<a href="#page6" class="go bottom"></a>
</div>
<div id="page3">
<a href="#page2" class="go left"></a>
<a href="#page4" class="go right"></a>
<a href="#page7" class="go bottom"></a>
</div>
<div id="page4">
<a href="#page3" class="go left"></a>
<a href="#page8" class="go bottom"></a>
</div>
<div id="page5">
<a href="#page1" class="go top"></a>
<a href="#page6" class="go right"></a>
<a href="#page9" class="go bottom"></a>
</div>
<div id="page6">
<a href="#page5" class="go left"></a>
<a href="#page2" class="go top"></a>
<a href="#page7" class="go right"></a>
<a href="#page10" class="go bottom"></a>
</div>
<div id="page7">
<a href="#page6" class="go left"></a>
<a href="#page3" class="go top"></a>
<a href="#page8" class="go right"></a>
<a href="#page11" class="go bottom"></a>
</div>
<div id="page8">
<a href="#page7" class="go left"></a>
<a href="#page4" class="go top"></a>
<a href="#page12" class="go bottom"></a>
</div>
<div id="page9">
<a href="#page5" class="go top"></a>
<a href="#page10" class="go right"></a>
<a href="#page13" class="go bottom"></a>
</div>
<div id="page10">
<a href="#page9" class="go left"></a>
<a href="#page6" class="go top"></a>
<a href="#page11" class="go right"></a>
<a href="#page14" class="go bottom"></a>
</div>
<div id="page11">
<a href="#page10" class="go left"></a>
<a href="#page7" class="go top"></a>
<a href="#page12" class="go right"></a>
<a href="#page15" class="go bottom"></a>
</div>
<div id="page12">
<a href="#page11" class="go left"></a>
<a href="#page8" class="go top"></a>
<a href="#page16" class="go bottom"></a>
</div>
<div id="page13">
<a href="#page9" class="go top"></a>
<a href="#page14" class="go right"></a>
</div>
<div id="page14">
<a href="#page13" class="go left"></a>
<a href="#page10" class="go top"></a>
<a href="#page15" class="go right"></a>
</div>
<div id="page15">
<a href="#page14" class="go left"></a>
<a href="#page11" class="go top"></a>
<a href="#page16" class="go right"></a>
</div>
<div id="page16">
<a href="#page15" class="go left"></a>
<a href="#page12" class="go top"></a>
</div>
</div>
<div id="nav">
<div>Fullscreen Javascript Slide navigation</div>
<div style="width:130px">
<a href="#page1" class="go"></a>
<a href="#page2" class="go"></a>
<a href="#page3" class="go"></a>
<a href="#page4" class="go"></a>
<a href="#page5" class="go"></a>
<a href="#page6" class="go"></a>
<a href="#page7" class="go"></a>
<a href="#page8" class="go"></a>
<a href="#page9" class="go"></a>
<a href="#page10" class="go"></a>
<a href="#page11" class="go"></a>
<a href="#page12" class="go"></a>
<a href="#page13" class="go"></a>
<a href="#page14" class="go"></a>
<a href="#page15" class="go"></a>
<a href="#page16" class="go"></a>
</div>
</div>
</div>
</body>
</html>Javascript代码
Js代码1.var navi = {
2. // variables
3. aPages : [],
4. aLinks : [],
5. tween : {},
6. oParent : null,
7. oPages : null,
8. bRunning : null,
9. sTargPage : null,
10. sCurPage : null,
11. bHash : null,
12. sOldH : null,
13. bUpdateH : true,
14.
15. // initialization
16. init : function (aParams) {
17. this.oPages = document.getElementById(aParams.pages_id);
18. this.oParent= document.getElementById(aParams.parent_id);
19.
20. var aAEls = this.oParent.getElementsByTagName('a');
21. var i = 0; var p = null;
22. while (p = aAEls) {
23. if (p.className && p.className.indexOf('go') >= 0) {
24. var sHref = p.href.split('#');
25. var oDst = document.getElementById(sHref);
26. if (oDst) {
27. // fill-in pages array
28. this.aPages = {
29. oObj:oDst,
30. iXPos: -oDst.offsetLeft,
31. iYPos: -oDst.offsetTop
32. };
33.
34. // fill-in links array
35. this.aLinks.push({a: p, oObj: oDst});
36.
37. p.onclick = function () {
38. navi.goto(this.href.split('#'), aParams.duration);
39. return false;
40. }
41. }
42. }
43. }
44.
45. this.resize();
46.
47. if ('onhashchange' in window) {
48. if (location.hash !== '' && location.hash !== '#') {
49. this.sOldH = location.hash.substring(1);
50. this.goto(this.sOldH, -1);
51. } else
52. this.goto('page1', -1);
53. this.bHash = true;
54.
55. window.onhashchange = function() {
56. if (location.hash.substring(1) !== navi.sOldH) {
57. navi.sOldH = location.hash.substring(1);
58. if (navi.sOldH == '') {
59. navi.bUpdateH = false;
60. }
61. navi.goto(navi.sOldH, aParams.duration);
62. }
63. return false;
64. }
65. }
66. },
67.
68. // on resize
69. resize : function () {
70. var iCurW = this.oParent.offsetWidth; // current sizes
71. var iCurH = this.oParent.offsetHeight;
72. for (var i in this.aPages) { // for each page
73. var oPage = this.aPages;
74. var iNewX = Math.round(oPage.oObj.offsetLeft * iCurW / oPage.oObj.offsetWidth); // new sizes
75. var iNewY = Math.round(oPage.oObj.offsetTop* iCurH / oPage.oObj.offsetHeight);
76. oPage.oObj.style.left = iNewX + 'px';
77. oPage.oObj.style.top = iNewY + 'px';
78. oPage.oObj.style.width= iCurW + 'px';
79. oPage.oObj.style.height = iCurH + 'px';
80. oPage.iXPos = -iNewX;
81. oPage.iYPos = -iNewY;
82.
83. if (this.sCurPage)
84. this.goto(this.sCurPage, -1);
85. }
86. },
87.
88. goto : function (sHref, iDur) {
89. this.tween.iStart = new Date() * 1;
90. this.tween.iDur = iDur;
91. this.tween.fromX = this.oPages.offsetLeft;
92. this.tween.fromY = this.oPages.offsetTop;
93. this.tween.iXPos = this.aPages.iXPos - this.tween.fromX;
94. this.tween.iYPos = this.aPages.iYPos - this.tween.fromY;
95. this.sTargPage = sHref;
96.
97. if (! this.bRunning)
98. this.bRunning = window.setInterval(this.animate, 24);
99. },
100.
101. animate : function () {
102. var iCurTime = (new Date() * 1) - navi.tween.iStart;
103. if (iCurTime < navi.tween.iDur) {
104. var iCur = Math.cos(Math.PI * (iCurTime / navi.tween.iDur)) - 1;
105. navi.oPages.style.left = Math.round(-navi.tween.iXPos * .5 * iCur + navi.tween.fromX) + 'px';
106. navi.oPages.style.top= Math.round(-navi.tween.iYPos * .5 * iCur + navi.tween.fromY) + 'px';
107. } else {
108. navi.oPages.style.left = Math.round(navi.tween.fromX + navi.tween.iXPos) + 'px';
109. navi.oPages.style.top= Math.round(navi.tween.fromY + navi.tween.iYPos) + 'px';
110.
111. window.clearInterval(navi.bRunning);
112. navi.bRunning = false;
113. navi.sCurPage = navi.sTargPage;
114.
115. var i = 0; var p = null;
116. while (p = navi.aLinks) {
117. if (p.oObj.id == navi.sCurPage) {
118. if (p.a.className.indexOf('visited') >= 0 ) {
119. p.a.className = p.a.className.replace('visited', 'active');
120. } else p.a.className += ' active';
121. p.visited = true;
122. } else if (p.visited) {
123. p.a.className = p.a.className.replace('active', 'visited');
124. }
125. }
126.
127. if (navi.bHash) {
128. if (navi.bUpdateH) {
129. navi.sOldH = navi.sCurPage;
130. window.location.hash = navi.sCurPage;
131. }
132. navi.bUpdateH = true;
133. }
134. }
135. }
136.}
137.
138.window.onload = function() { // page onload
139. navi.init({parent_id: 'container', pages_id: 'pages', duration: 1000});
140.}
141.window.onkeydown = function(event){ // keyboard alerts
142. switch (event.keyCode) {
143. case 37: // Left key
144. var iPage = navi.sCurPage.substring(4) * 1;
145. iPage--;
146. if (iPage < 1) {
147. iPage = 1;
148. }
149. navi.goto('page' + iPage, 1000);
150. break;
151. case 39: // Right key
152. var iPage = navi.sCurPage.substring(4) * 1;
153. iPage++;
154. if (iPage > 16) {
155. iPage = 16;
156. }
157. navi.goto('page' + iPage, 1000);
158. break;
159. }
160.}; 谢谢分享 谢谢分享资料。
页:
[1]