简要教程
ScrollMenu是一款非常实用的jQuery整页全屏滚动导航按钮特效插件。通过ScrollMenu可以将导航按钮设置为垂直或水平的导航条，并可以带预览图。当点击一个导航按钮时，页面以整页全屏滚动的方式平滑过渡。
使用方法
使用该全屏翻页导航按钮插件需要引入jQuery(1.7+)和scrollmenu.css以及scrollmenu.js文件。
1 2 3 | <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结构如下：
1 2 3 4 5 6 7 | <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> |
初始化插件
在页面加载完毕之后，可以通过下面的方法来初始化该插件。
1 | 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的设置
为了能够让用户定制独特的滚动菜单，插件提供了两个模板选项，例如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 超酷堆叠相片转瀑布流网格布局动画效果设计
- 下一个特效： jQuery实现淘宝打星评价