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;

      })})};

圖1：document高度超過window，瀏覽器出現滾動條，滾動滾動條，提交按鈕的offset不變。

圖2：document中的div有滾動條，提交按鈕的offset隨div的滾動變化而變化，與document無關

這是我做的一個婚慶網頁應用頁面

2jQuery one page nav外掛應用

這個外掛是聽了一個教學視訊學到的。後來在這個地址發現詳細的介紹

需要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: ""

        })

    })