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

所属分类:UI-滚动,布局

 32104  350  查看评论 (1)
分享到微信朋友圈
X
sectionscroll.js|可生成垂直整页滚动导航的jQuery插件 ie兼容10

简要教程

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


相关插件-滚动,布局

jQuery全屏视差滚动效果

jQuery全屏视差滚动效果
  滚动
 44753  434

jQuery自定义滚动条插件

支持IE9及以上,360,谷歌,火狐的自定义滚动条,可以设置滚动条的初始位置以及滚动条的颜色等
  滚动
 26905  316

jQuery全屏滚动插件,带箭头点击

一款功能齐全的全屏滚动插件,符合绝大部分开发人员的需求,没有滚动循环,无需做过多更改就能满足您的要求。
  滚动
 18934  217

锚点,可以扩展很多功能

锚点定位,代码实现简单,无依赖其它插件
  滚动
 23757  343

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    SiriBen 0
    2016/10/5 17:10:48
    这个好,自适应,主要是免费分享才是王道 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复