当前位置:主页 > 网页特效 > 菜单导航 >

jQuery整页全屏滚动导航按钮特效插件

发布时间:2018/08/03 来源:互联网 浏览: 关键词:jquery 菜单导航 
jQuery整页全屏滚动导航按钮特效插件 jQuery整页全屏滚动导航按钮特效插件
阿里云

简要教程

ScrollMenu是一款非常实用的jQuery整页全屏滚动导航按钮特效插件。通过ScrollMenu可以将导航按钮设置为垂直或水平的导航条,并可以带预览图。当点击一个导航按钮时,页面以整页全屏滚动的方式平滑过渡。

使用方法

使用该全屏翻页导航按钮插件需要引入jQuery(1.7+)和scrollmenu.css以及scrollmenu.js文件。

<linkhref="scrollmenu.css" rel="stylesheet"type="text/css"/>
<scriptsrc="jquery.js"></script><!-- Supports jQuery 1.7 plus-->
<scriptsrc="scrollmenu.js"></script>        

HTML结构

页面基本的HTML结构如下:

<divid="wrapper"><!--- wrapper can be just body -->
    <sectionclass="section"></section>
    <sectionclass="section"></section>
    <sectionclass="section"></section>
    <sectionclass="section"></section>
    <sectionclass="section"></section>
</div>     

初始化插件

在页面加载完毕之后,可以通过下面的方法来初始化该插件。

varmyScrollMenu = 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的设置

为了能够让用户定制独特的滚动菜单,插件提供了两个模板选项,例如:

varsetupOption = {
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 %>'
        }]
    };
      
    varscrollMenu  = 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

关于该整页全屏滚动导航按钮特效的更详细的使用方法请参考:http://ignitersworld.com/lab/scrollmenu/doc.html

共有人阅读,期待你的评论!评论
Top