jquery动画 -- 5.单页导航动画效果的实现-阿里云开发者社区

开发者社区> bill.kang> 正文

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

简介:   我们本章要介绍的是单页导航动画效果的实现,感觉有点拗口,其实我也不知道这个效果动画到底叫什么名字合适。   其实他实现的功能还是好理解的,就是有一个母页面,母页面会加载一定数目的子页面,母页面上有各个子页面的link。
+关注继续查看

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

  其实他实现的功能还是好理解的,就是有一个母页面,母页面会加载一定数目的子页面,母页面上有各个子页面的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事件。

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

  demo下载地址:jQuery.animation.singlePageSite.zip

adpics.aspx?source=kbh1983&sourcesuninfo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10086 0
35+ 个 jQuery 实现的动画技术教程
Experimental CSS3 Animations for Image Transitions Item Blur Effect with CSS3 and jQuery Experiments with background-clip: text Lateral On-Sc...
731 0
CSS3动画过渡的jquery动态弹出框插件
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
694 0
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.8 技巧:指定自定义的过渡动画
假使需要不同的动画,而不是在前面的示例中提供的默认动画集,你可以引进自定义的动画。你可以使用CSS3变换(CSS3 transition)来创建平滑的硬件加速动画,包含2D和3D。
1372 0
jquery动画 -- 6.制作带鼠标和键盘引导功能的图片浏览器
  今天我们要介绍的jquery动画效果是,当移动鼠标或者按键盘的左右键时,图片走廊中的图片向相应方向转动。   先来看张效果图,教程最后附有demo,大家可以下载。   首先要做的工作是创建html文本。
875 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
bill.kang
从事软件研发十余年,入行前端开发六年有余,对前端工程化有一定认识。 现就职于客如云科技有限公司,任前端技术经理一职。
109
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载