sectionscroll.js|可生成垂直整頁滾動導航的jQuery插件

2021-10-18 16:27 更新

ie兼容10 
插件描述：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結(jié)構(gòu)

頁面基本的HTML結(jié)構(gòu)如下：

<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 接收兩個參數(shù)：

  • wrapper：（可選項）wrapper可以使一個選擇器，DOM元素或jQuery對象。如果wrapper沒有定義插件會默認使用<body>來作為wrapper。

  • options：（可選項）配置參數(shù)。

理解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參數(shù)來修改它。

  • 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);

配置參數(shù)

參數(shù)      允許值 默認值 描述

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 動畫的持續(xù)時間

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




以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號