在线演示
在线下载
这篇文章介绍了如何使用幻灯方式来进行全屏幕页面导航，包括了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代码
var navi = {
// variables
aPages : [],
aLinks : [],
tween : {},
oParent : null,
oPages : null,
bRunning : null,
sTargPage : null,
sCurPage : null,
bHash : null,
sOldH : null,
bUpdateH : true,
// initialization
init : function (aParams) {
this.oPages = document.getElementById(aParams.pages_id);
this.oParent = document.getElementById(aParams.parent_id);
var aAEls = this.oParent.getElementsByTagName('a');
var i = 0; var p = null;
while (p = aAEls[i++]) {
if (p.className && p.className.indexOf('go') >= 0) {
var sHref = p.href.split('#')[1];
var oDst = document.getElementById(sHref);
if (oDst) {
// fill-in pages array
this.aPages[sHref] = {
oObj: oDst,
iXPos: -oDst.offsetLeft,
iYPos: -oDst.offsetTop
};
// fill-in links array
this.aLinks.push({a: p, oObj: oDst});
p.onclick = function () {
navi.goto(this.href.split('#')[1], aParams.duration);
return false;
}
}
}
}
this.resize();
if ('onhashchange' in window) {
if (location.hash !== '' && location.hash !== '#') {
this.sOldH = location.hash.substring(1);
this.goto(this.sOldH, -1);
} else
this.goto('page1', -1);
this.bHash = true;
window.onhashchange = function() {
if (location.hash.substring(1) !== navi.sOldH) {
navi.sOldH = location.hash.substring(1);
if (navi.sOldH == '') {
navi.bUpdateH = false;
}
navi.goto(navi.sOldH, aParams.duration);
}
return false;
}
}
},
// on resize
resize : function () {
var iCurW = this.oParent.offsetWidth; // current sizes
var iCurH = this.oParent.offsetHeight;
for (var i in this.aPages) { // for each page
var oPage = this.aPages[i];
var iNewX = Math.round(oPage.oObj.offsetLeft * iCurW / oPage.oObj.offsetWidth); // new sizes
var iNewY = Math.round(oPage.oObj.offsetTop * iCurH / oPage.oObj.offsetHeight);
oPage.oObj.style.left = iNewX + 'px';
oPage.oObj.style.top = iNewY + 'px';
oPage.oObj.style.width = iCurW + 'px';
oPage.oObj.style.height = iCurH + 'px';
oPage.iXPos = -iNewX;
oPage.iYPos = -iNewY;
if (this.sCurPage)
this.goto(this.sCurPage, -1);
}
},
goto : function (sHref, iDur) {
this.tween.iStart = new Date() * 1;
this.tween.iDur = iDur;
this.tween.fromX = this.oPages.offsetLeft;
this.tween.fromY = this.oPages.offsetTop;
this.tween.iXPos = this.aPages[sHref].iXPos - this.tween.fromX;
this.tween.iYPos = this.aPages[sHref].iYPos - this.tween.fromY;
this.sTargPage = sHref;
if (! this.bRunning)
this.bRunning = window.setInterval(this.animate, 24);
},
animate : function () {
var iCurTime = (new Date() * 1) - navi.tween.iStart;
if (iCurTime < navi.tween.iDur) {
var iCur = Math.cos(Math.PI * (iCurTime / navi.tween.iDur)) - 1;
navi.oPages.style.left = Math.round(-navi.tween.iXPos * .5 * iCur + navi.tween.fromX) + 'px';
navi.oPages.style.top = Math.round(-navi.tween.iYPos * .5 * iCur + navi.tween.fromY) + 'px';
} else {
navi.oPages.style.left = Math.round(navi.tween.fromX + navi.tween.iXPos) + 'px';
navi.oPages.style.top = Math.round(navi.tween.fromY + navi.tween.iYPos) + 'px';
window.clearInterval(navi.bRunning);
navi.bRunning = false;
navi.sCurPage = navi.sTargPage;
var i = 0; var p = null;
while (p = navi.aLinks[i++]) {
if (p.oObj.id == navi.sCurPage) {
if (p.a.className.indexOf('visited') >= 0 ) {
p.a.className = p.a.className.replace('visited', 'active');
} else p.a.className += ' active';
p.visited = true;
} else if (p.visited) {
p.a.className = p.a.className.replace('active', 'visited');
}
}
if (navi.bHash) {
if (navi.bUpdateH) {
navi.sOldH = navi.sCurPage;
window.location.hash = navi.sCurPage;
}
navi.bUpdateH = true;
}
}
}
}
window.onload = function() { // page onload
navi.init({parent_id: 'container', pages_id: 'pages', duration: 1000});
}
window.onkeydown = function(event){ // keyboard alerts
switch (event.keyCode) {
case 37: // Left key
var iPage = navi.sCurPage.substring(4) * 1;
iPage--;
if (iPage < 1) {
iPage = 1;
}
navi.goto('page' + iPage, 1000);
break;
case 39: // Right key
var iPage = navi.sCurPage.substring(4) * 1;
iPage++;
if (iPage > 16) {
iPage = 16;
}
navi.goto('page' + iPage, 1000);
break;
}
};
分享到：
相关推荐
本文将深入探讨“jQuery Textarea全屏插件Textarea Fullscreen”，这是一个轻量级的解决方案，用于将网页上的textarea元素转换为全屏模式，提供更好的用户输入体验。 “Textarea Fullscreen”插件，正如其名，旨在...
以下是一个简单的全屏功能实现示例： ```javascript function toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document....
在网页开发中，fullscreen 全屏功能是非常常用的一个功能，它可以让用户在浏览器中打开一个全屏的页面，提高用户体验。今天，我们就来讨论如何使用javascript 实现 fullscreen 全屏功能。 首先，让我们来看一下什么...
eclipse 全屏插件 fullscreen 获得更多编辑空间
Fullscreen API 是一个标准化的接口，允许JavaScript控制元素进入或退出全屏模式。它提供了两个主要的方法：`element.requestFullScreen()` 和 `document.exitFullScreen()`。前者用于将指定的元素（如body）进入...
jQuery-FullScreen-master 是一个基于jQuery的插件，专门用于实现这种全屏功能。在这个项目中，我们将探讨jQuery全屏插件的工作原理、如何使用以及它的核心功能。 jQuery库是一个轻量级的JavaScript库，简化了DOM...
"Unity强制全屏功能"这个压缩包文件很可能包含了一个Unity工程或资源包，用于实现Unity项目中的全屏切换。下面我们将深入探讨Unity中实现全屏功能的相关知识点。 1. 全屏模式类型： Unity提供了两种全屏模式：窗口...
Textarea Fullscreen是一个jquery插件,可以将textarea设置为全屏模式 使用方法 引用jquery.js,jquery.textareafullscreen.js和textareafullscreen.css <script type="text/javascript"> $(function(){ $('#demo'...
1. **HTML 结构**：创建一个包含多个全屏容器的结构，每个容器代表一个滚动页面。 ```html <div class="fullscreen-scroll"> <div class="scroll-page">Page 1 <div class="scroll-page">Page 2 ...
1. 幻灯片容器：创建一个全屏的容器，通常使用CSS3的`transform`和`transition`属性来实现平滑的过渡效果。 2. 图片切换：通过改变容器中的图片或者设置容器的背景图片，实现图片切换。可以使用定时器配合事件监听...
iQare全屏网站导航是一个扩展，让我们在轻松快捷的方式浏览全屏网站。 iQare全屏站点导航是一项扩展，可让您轻松快捷地浏览全屏网站。 支持语言:English
响应式设计是现代网页开发的关键元素，它使得...了解并熟练运用这些知识点，你就能创建出一个高效、美观的全屏背景图片幻灯片。无论是用于企业网站、个人博客还是产品展示，这样的插件都能够为用户带来卓越的视觉体验。
在网页开发中，有时我们需要提供一个功能，让用户可以...结合jQuery库，我们可以方便地创建一个全屏插件，实现一键全屏切换功能。在实际应用中，记得对浏览器的兼容性进行考虑，使用vendor prefix来适配不同的浏览器。
下面是一个简单的示例，演示如何使用JavaScript来控制全屏状态： ```javascript // 打开全屏 function fullScreen() { const el = document.documentElement; if (el.requestFullscreen) { el....
fullscreen.js 简单的浏览器全屏库，与常见的主流浏览器兼容 演示版 安装 npm install fullscreen . js -- save // or < script src = './fullscreen.min.js' > < / script > 用法 import fullscreen from...
jQuery Finger插件正是为实现这一功能而生，它是一个轻量级且易于使用的库，旨在帮助开发者创建具有左右全屏切换效果的幻灯片。下面我们将深入探讨jQuery Finger插件的关键特性、工作原理以及如何在项目中集成和...
Vue.js是一个流行的JavaScript框架，用于构建用户界面，而Vue-fullscreen则是专门为Vue.js设计的一个插件，它使得在Vue组件中轻松实现全屏模式成为可能。 在"vue-fullscreen-master.zip"这个压缩包中，包含的是Vue-...
例如，以下代码可以创建一个全屏的图形窗口： ```matlab figure('Units', 'normalized', 'Position', [0 0 1 1]); ``` 这里的`'Units'`参数设为`'normalized'`，意味着位置坐标是相对于父容器（在这种情况下是桌面...