分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)

标签：分享 javascript 导航 | 发表时间：2012-01-21 10:54 | 作者：gbin1

出处：http://www.cnblogs.com/

分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation) gbin1.com

这篇文章介绍了如何使用幻灯方式来进行全屏幕页面导航，包括了16个幻灯，4个一行，一共4行。并且通过了CSS3箭头添加了动画导航效果。而且提供一个迷你的导航条能够帮助用户记录访问过的幻灯页面。希望大家喜欢！

HTML标签

<!DOCTYPE html>   
<html lang="en">   
    <head>   
        <meta charset="utf-8" />   
        <title>Fullscreen Javascript Slide navigation demo</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;   
    }   
};

效果请参考演示

本文链接

分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)

- - 博客园_首页

这篇文章介绍了如何使用幻灯方式来进行全屏幕页面导航，包括了16个幻灯，4个一行，一共4行. 并且通过了CSS3箭头添加了动画导航效果. 而且提供一个迷你的导航条能够帮助用户记录访问过的幻灯页面.

分享15款很棒的 JavaScript 开发工具

- xxg - 博客园-首页原创精华区

　　在开发中，借助得力的工具可以事半功倍. 今天，这篇文章向大家分享最新收集的15款非常有用的 JavaScript 开发工具. TestSwarm是Mozilla实验室推出的一个开源项目，它旨在为开发者提供在多个浏览器版本上快速轻松测试自己JavaScript代码的方法. 在网络上，速度是很重要的，Minimee能帮助你将CSS和JavaScript文件进行自动压缩和打包.

不久以前，我给大家分享过7个比较经典的jquery游戏，原文分享7个不错的jQuery游戏，发现不少朋友对这方面还都比较感兴趣，也多谢大家的关注. 今天，我就继续来分享5个经典的javascript游戏，下面的游戏都是从网络上收集的，我很喜欢他们，就收藏到了自己的个人博客中了，现在也向园子里的兄弟们分享一下，希望大家也能喜欢：）另外由于很多都是从国外网站收集过来的，可能加载会有点慢，请大家耐心等待加载.

10个有趣强大的 jQuery导航教程/插件分享

- Kai - ITeye资讯频道

使用jQuery能够做出令人称奇的效果，而且轻而易举. 在导航制作领域，jQuery没有对手. 虽然并不是所有的人都精通jQuey，但学会并使用它们并不难. 网上有许多的jQuery导航教程，可以帮助你学习如何在为用户导航之余为他们增加一些简单而有趣的效果体验. 如你所知，近来有一大批竞争的javascript库出现.

Javascript诞生记

- Milido - 阮一峰的网络日志

二周前，我谈了一点Javascript的历史. 今天把这部分补全，从历史的角度，说明Javascript到底是如何设计出来的. 只有了解这段历史，才能明白Javascript为什么是现在的样子. 我依据的资料，主要是Brendan Eich的自述. "1994年，网景公司（Netscape）发布了Navigator浏览器0.9版.

JavaScript，你懂的

- dylan - keakon的涂鸦馆

经常有人问我，JavaScript应该怎么学. 先学基本语法，如果曾学过C等语言，应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API，熟悉它能干什么；而在学习DOM API的过程中，你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包，学会至少一个常用的JavaScript库（例如jQuery）.

Javascript 里跑Linux

- rockmaple - Shellex's Blog

牛逼到暴的大拿 Fabrice Bellard，用Javascript实现了一个x86 PC 模拟器，然后成功在这个模拟器里面跑Linux（请用Firefox 4 / Google Chrome 11打开，Chome 12有BUG）. 关于这个东西… 伊说 “I did it for fun“，大大啊大大啊….

高效 JavaScript

- xtps - ITeye论坛最新讨论

传统上，网页中不会有大量的脚本，至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序，脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多，因此提高脚本的性能变得很重要. 对于桌面应用程序，通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.

你得学JavaScript

- 蒋冰 - 伯乐在线 -博客

　　注：本文由敏捷翻译 - 蒋少雄翻译自 Kenny Meyers 的博文. 　　如果三年前你问我应该学什么语言，我会告诉你是Ruby. 　　如果你现在想学一门语言的话，你应该学习JavaScript.. 　　我认为，每一位Web开发人员都应该学习JavaScript. 目前推出的许多新技术都支持这个观点.

javascript 贪食蛇

- Xin - 博客园-首页原创精华区

我的程序用javascript与Html中的table结合，实现的简单的贪食蛇游戏，游戏的主要特点，可调整蛇移动速度，可调整蛇移动范围，碰壁、咬到身体则“Game Over. 游戏并不完善，只是实现了主要的功用，有设计不合理的地方，欢迎您感大家提意见. 实现方法：由javascript语言中的setInterval方法驱动整个游戏程序，设置“nowDirection”即蛇的当前移动方向为全局变量，由setInterval方法定时获取蛇的移动方向，由document.onkeydown()捕捉当前按键（上、下、左、右）以修改nowDirection，这样就可以用方向按键控制蛇周期时间的定向移动.

分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)

相关 [分享 javascript 导航] 推荐：

分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)

分享15款很棒的 JavaScript 开发工具

继续分享5个不错javascript游戏

10个有趣强大的 jQuery导航教程/插件分享

Javascript诞生记

JavaScript，你懂的

Javascript 里跑Linux

高效 JavaScript

你得学JavaScript

javascript 贪食蛇

相关文章

订阅