插件描述：sectionscroll.js是一款可以自動生成垂直整頁滾動導航的jQuery插件。通過點擊圓點導航按鈕可以在各個section之間平滑的滾動。該插件使用簡單，非常實用。
簡要教程
ScrollMenu是一款非常實用的jQuery整頁全屏滾動導航按鈕特效插件。通過ScrollMenu可以將導航按鈕設置為垂直或水平的導航條，并可以帶預覽圖。當點擊一個導航按鈕時，頁面以整頁全屏滾動的方式平滑過渡。
使用方法
使用該全屏翻頁導航按鈕插件需要引入jQuery(1.7+)和scrollmenu.css以及scrollmenu.js文件。
<link href="scrollmenu.css" rel="stylesheet" type="text/css" /> <script src="jquery.js"></script> <!-- Supports jQuery 1.7 plus--> <script src="scrollmenu.js"></script>
HTML結構
頁面基本的HTML結構如下：
<div id="wrapper"> <!--- wrapper can be just body --> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> </div>
初始化插件
在頁面加載完畢之后，可以通過下面的方法來初始化該插件。
var myScrollMenu = ScrollMenu([wrapper] [,options]);
ScrollMenu 默認使用的section class來識別頁面中的不同部分（section）。
ScrollMenu 接收兩個參數：
wrapper：（可選項）wrapper可以使一個選擇器，DOM元素或jQuery對象。如果wrapper沒有定義插件會默認使用<body>來作為wrapper。
options：（可選項）配置參數。
理解ScrollMenu
ScrollMenu包含3個主要部分，每個部分都包含各自不同的class和樣式。
Anchors(className : scroll-anchor)：Anchors代表scrollbar中的一個section頁面。一個anchor 在垂直導航條的高度或在水平導航條的寬度于代表的sections的高度成比例。
Handles (className : scroll-handle)：滾動導航條中的手柄。
Menu (className : scroll-menu-content)：Menu是導航菜單。
ScrollMenu的類型
ScrollMenu包含三種基本的類型。默認是vertical類型，可以通過menuType參數來修改它。
vertical：垂直滾動菜單。
horizontal：水平滾動菜單。
horizontal-menu：固定在頂部的水平菜單。
模板菜單和Anchor的設置
為了能夠讓用戶定制獨特的滾動菜單，插件提供了兩個模板選項，例如：
var setupOption = { template: '<div class="menu-wrap"><div class="menu"><%= label %></div></div>', anchorSetup: [ { backgroundColor: "#dc767d", label: "ScrollMenu.js", className: "test" }, { backgroundColor: "#36d278", label: "Demos" }, { backgroundColor: "#22cfc6", label: "Custom Scroll Hooks", template : '<%= label %>' }] }; var scrollMenu = ScrollMenu(setupOption);
配置參數
參數 允許值 默認值 描述
sectionClass string section 頁面中每個部分的class標識符
menuType vertical / horizontal / horizontal-menu vertical 菜單的類型
appendTo selector string / jquery object / dom elememt container 在什么地方添加scrollMenu，默認添加到container中
animateOnScroll boolean true 如果設置為true將以動畫的方式滾動
animationDuration integer 600 動畫的持續時間
nativeScroll boolean true 如果設置為true使用原生的滾動
scrollbarVisible boolean false 如果設置為false將隱藏原生的滾動條
scrollAnchorSpacing integer 10 2個anchors之間的間距
anchorSetup array of setup objec null A array of setup objects to template anchors and menu
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
