26
2012
08

jquery动画 -- 5.单页导航动画效果的实现

  我们本章要介绍的是单页导航动画效果的实现,感觉有点拗口,其实我也不知道这个效果动画到底叫什么名字合适。

  其实他实现的功能还是好理解的,就是有一个母页面,母页面会加载一定数目的子页面,母页面上有各个子页面的link。默认母页面显示第一个子页面的内容,当点击母页面上的链接时,显示相应子页面的内容。这里的母页面和子页面是实际存在的不同页面,但是整个动画实现的结果是,所有页面的切换都是在母页面上实现的,url并没有发生变化。要是大家还不知道是怎么回事,那就下载demo看运行效果吧,一看便知。

  

 

  好了不说废话了,开始我们的教程。第一步是创建母页面的html代码。


<div id="outer-container">
    <header>
        <h1>
            A Whole Site on a Single Page</h1>
        <nav class="clear-float">
            <ul>
                <li><a class="on" href="single-page-site-1.html" title="Page 1">Page 1</a></li>
                <li><a href="single-page-site-2.html" title="Page 2">Page 2</a></li>
                <li><a href="single-page-site-3.html" title="Page 3">Page 3</a></li>
                <li><a href="single-page-site-4.html" title="Page 4">Page 4</a></li>
                <li><a href="single-page-site-5.html" title="Page 5">Page 5</a></li>
            </ul>
        </nav>
    </header>
    <div id="content">
    </div>
    <footer>
        <small>Copyright &copy; Dan Wellman 2010</small>
        <nav class="clear-float">
            <ul>
                <li><a href="single-page-site-1.html" title="Page 1">Page 1</a></li>
                <li><a href="single-page-site-2.html" title="Page 2">Page 2</a></li>
                <li><a href="single-page-site-3.html" title="Page 3">Page 3</a></li>
                <li><a href="single-page-site-4.html" title="Page 4">Page 4</a></li>
                <li><a href="single-page-site-5.html" title="Page 5">Page 5</a></li>
            </ul>
        </nav>
    </footer>
</div>  接下来是子页面的,每个子页面内容差不多,我只展示第一个子页面的内容。


<div id="content">
    <h1>
        Single Page Site Page 1</h1>
    <p>
        This is the page 1 of the site</p>
    <p>
        Single Page Site Page 1</p>
</div>  这里需要注意的是,必须保证子页面的内容是被一个id为content的容器包围着,因为js代码中我们使用load的方法的时候需要用到这个id!

  html定义完了就需要定义css了,这里我就不贴了,有点浪费篇幅。大家下载源码,自己去看css吧。

  在创建js代码之前,母页面需要引用jquery和一个叫做jquery.scrollTo.js的jquery插件,然后我们就可以正式开始书写js了(jquery.scrollTo.js是jquery插件站点提供的一个插件,我demo中有,大家就不需要额外下载了)。接下来就是我们实现的js代码了。


//清空内容载体
$('#content').empty();

//获取window对象
var win = $(window),
//获取头部导航link
links = $('header nav a'),
//获取内容载体
content = $('#content'),
//定义内容页定位对象
positions = {},
//定义屏幕高宽对象
screensize = {
    width: win.width(),
    height: win.height()
},  这段代码比较简单,就是定义了一些变量。


//定义内容页载体
pages = $('<div></div>', {
    id: 'pages'
}).bind('contentLoaded', function () { //这里定义了一个自定义事件contentLoaded
    //将内容页载体对象添加到内容载体对象
    $(this).appendTo(content).parent().addClass('full');

    //定义内容载体对象的高和宽
    content.width(screensize.width * links.length);
    content.height(screensize.height * 2);
    //固定header和footer,同时设置body的padding-top,这样切换页面的时候,加载的新页面不会覆盖在header上
    content.parent().find('header,footer').addClass('fixed')
            .closest('body').css('padding-top', $('header').outerHeight());
               
    //为header和footer的a标签添加click事件
    links.add('footer nav a').click(function (e) {
        //阻止默认事件
        e.preventDefault();

        //获取要显示的子页面的id
        var id = (this.href.indexOf('#') != -1) ? this.href.split('#')[1] : 'page-' + this.title.split(' ')[1];
        //获取header和footer对象
        var navs = $('header').add('footer');
        //导航消失
        navs.fadeOut('fast');
        //这里我们用到了jquery.scrollTo.js插件,实现页面的移动效果
        $.scrollTo({
            top: positions[id].top,
            left: positions[id].left
        }, 800, function () {
            //动画结束,显示导航
            navs.slideDown('fast');
        });
    });
});  这段代码是比较核心的一部分代码,实现的功能就是定义了子页面总的包装容器pages,为它创建了自定义的contentLoaded事件,在该事件中将pages对象添加到母页面中,并为header和footer中的a标签定义click事件。代码里面有注释,希望能帮助大家理解代码,如果还是看不懂,可以给我留言。


//遍历links对象,加载相应的子页面
links.each(function (i) {
    //获取需要加载的子页面的id
    var id = 'page-' + (i + 1);
    //设置子页面偏移量对象
    positions[id] = {};
    positions[id].left = screensize.width * i;
    positions[id].top = (i % 2) ? screensize.height : 0;

    //通过load事件加载子页面,并添加到子页面容器pages中
    //这里要注意load方法上的细节' #content > *',你必须保证你需要加载的子页面中包含有id为content的内容,
    //load只会加载#content里面的内容
    $('<div></div>', {
        'class': 'page',
        load: this.href + ' #content > *'
    }).css({
        left: positions[id].left,
        top: positions[id].top
    }).appendTo(pages);

    this.href = '#' + id;

    //当所有子页面加载完毕后出发自定义事件contentLoaded
    if (i == links.length - 1) {
        pages.trigger('contentLoaded');
    }
});  上面的代码实现的功能是加载各个子页面,定义他们的偏移量,当所有子页面加载完毕后触发contentLoaded事件。

  好了,今天的可能就讲解完毕了,希望对大家有帮助。

« 上一篇下一篇 »

评论列表:

1.丁泽方  2012/8/28 8:32:56 回复该留言
博主辛苦了,这么久了还在坚持更新。
2.程序设计  2012/8/28 20:40:30 回复该留言
技术博客啊,我对这块也蛮感兴趣的,欢迎博主回访交流

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。