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: ""
})
})