页面导航效果实现总结

1 juery.anchor.js插件应用

1.1 anchor.js 是简单且有用的 jQuery 插件，为所有本地链接提供一个平滑的动画，然后跳转到页面的任意一个元素。

使用：需要在导航页面做绑定，例如：

<li><a href="#home"class="anchorLink">Home</a></li>

        在要跳转到页面添加锚点<aname="home" id="home"></a>完成绑定设置。

1.2 源码分析

$(document).ready(function(){

      $("a.anchorLink").anchorAnimate()

});

 

jQuery.fn.anchorAnimate= function(settings) {

     settings= jQuery.extend({

           speed : 1100

      }, settings); //这里给出setting设置默认值

      return this.each(function(){

           var caller = this

           $(caller).click(function (event) { 

                 event.preventDefault();//阻止默认事件

                 var locationHref =window.location.href

        //设置重定向到新页面地址，同时刷新打开的这个页面；

                 var elementClick =$(caller).attr("href");//读取href属性值取id

                 var destination =$(elementClick).offset().top;

//读取对应id的锚点与document的上端距离。注释①

           $("html:not(:animated),body:not(:animated)")//页面不是动画元素

.animate({ scrollTop: destination},settings.speed, function() {

                      window.location.hash =elementClick});//设置页面标签值

                   returnfalse;

      })})};

①     引自http://www.bubuko.com/infodetail-928979.html博客文章一文

图1：document高度超过window，浏览器出现滚动条，滚动滚动条，提交按钮的offset不变。

 

图2：document中的div有滚动条，提交按钮的offset随div的滚动变化而变化，与document无关

这是我做的一个婚庆网页应用页面

2jQuery one page nav插件应用

这个插件是听了一个教学视频学到的。后来在这个地址发现详细的介绍

http://www.gbin1.com/technology/jquerynews/20120421jquerypluginonpagenav/

需要jQuery、scrollTo插件，JavaScript调用代码：

$(document).ready(function(){

       $(‘#nav’).onePageNav();

})

currentClass：缺省值'current'，用来定义选定的导航项目的样式

changeHash：缺省值false，如果你希望hash变化，那么设定这个选项为true。

scrollSpeed：缺省值700，定义滚动速度

3juery.flexslider.js 插件应用

FlexSlider是一个非常出色的jQuery滑动切换插件，它支持所有主流浏览器，并有淡入淡出效果。FlexSlider对于网站开发者来说是一个不错测JQUERY特效，因为支持全浏览器深受中国网站前端开发者的喜爱！http://www.ijquery.cn/?p=176

需要jQuery、scrollTo插件，JavaScript调用代码：

 $(window).load(function () {

        $('.flexslider').flexslider({

            animation: "slide",//动画效果滑动or淡出

            controlNav: true,//是否由导航控制

            pauseOnHover: true, //鼠标滑向滚动内容时，是否暂停滚动

            slideshowSpeed: 15000,

            prevText: "",

            nextText: ""

        })

    })