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

最新推荐文章于 2019-12-03 15:40:51 发布

jjfatjjfat

最新推荐文章于 2019-12-03 15:40:51 发布

阅读量92

点赞数

分类专栏：分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation) 文章标签： JavaScript ViewUI

分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation) 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

分享一个超酷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 | 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;
    }
};

效果请参考演示

jjfatjjfat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)

在线演示在线下载这篇文章介绍了如何使用幻灯方式来进行全屏幕页面导航，包括了16个幻灯，4个一行，一共4行。并且通过了CSS3箭头添加了动画导航效果。而且提供一个迷你的导航条能够帮助用户记录访问过的幻灯页面。希望大家喜欢！HTML标签&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&g...
复制链接

扫一扫

专栏目录