中国最全IT社区平台联系我们 | 收藏本站

Jquery集合

浏览声明

UI

分类插件

jQuery分类插件jquery.sort.js

模态框

iziModal-时尚炫酷的jQuery模态窗口插件

滚动轮播

横版

竖版

拖拉排序

多选框

mootools分页多选搜索插件

滚动条

Loading

CSS3网页Loading

移动端

提示框

功能性插件

瀑布流

CSS3立方体小照片

D3.js logo可视化库 D3.js

图片处理

banner特效

文字浮动跟随鼠标移动

←上一篇： jQuery上下滑动加载刷新插件iscroll.js

→下一篇：Loading

sectionscroll.js|可生成垂直整页滚动导航的jQuery插件

阅读 (2428)

查看演示 website

下载地址：https://github.com/s-yadav/ScrollMenu

插件描述：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);