轻量级jQuery全屏翻页插件

当前位置:主页 > jQuery库 > 布局和界面 > 轻量级jQuery全屏翻页插件
轻量级jQuery全屏翻页插件
分享:

    插件介绍

    naiveScroll是一款轻量级的jQuery全屏翻页插件。通过该插件,可以在滚动鼠标或点击按钮时,以平滑过渡的方式垂直全屏翻页。

    浏览器兼容性

    浏览器兼容性
    时间:2016-07-26
    阅读:
简要教程

naiveScroll是一款轻量级的jQuery全屏翻页插件。通过该插件,可以在滚动鼠标或点击按钮时,以平滑过渡的方式垂直全屏翻页。该插件的特点还有:

  • 覆盖鼠标事件进行全屏翻页。
  • 不需要添加额外的HTML元素。
  • 不会产生多余的事件。
  • 提供API来手动上下翻页。
  • 轻量级,压缩后的版本小于1KB。

使用方法

在页面中引入jquery和naiveScroll.min.js文件。

<script src="jquery.min.js" type="text/javascript"></script>
<script src="naiveScroll.min.js" type="text/javascript"></script>                  
                
HTML结构

使用<section>元素作为每一个分段页面的标签,不需要在添加额外的class类。你也可以修改js代码来使用其它标签作为分段标签。

<body>
    <section></section>
    <section></section>
    <section></section>
</body>  
                
CSS样式

你可以为每一个<section>分段设置不同的背景颜色,同时为各个分段设置必要的top属性。

<body>
    <section class="page1"></section>
    <section class="page2"></section>
    <section class="page3"></section>
</body>  
                
/* 使用背景颜色 */
.page1 {
    top: 0;
    background-color: lightcoral;
}

/* 使用背景图像 */
.page2 {
    top: 100%;
    background: url("foo.jpg") no-repeat center center;
    background-size: cover;
}

/* 注意top属性的使用 */
.page3 {
    top: 200%;
    background-color: lightblue;
}                  
                
初始化插件

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

$(document).ready(function() {
      $(this)._naiveScroll.init();
});        
                

事件

你可以通过按钮来触发页面的向上滚动或向下滚动。

$('#upBtn').click(function () {
    $(this)._naiveScroll.triggerScroll(100);
});

$('#downBtn').click(function () {
    $(this)._naiveScroll.triggerScroll(-100);
});                  
                

naiveScroll全屏滚动插件的github地址为:https://github.com/doodlewind/naiveScroll

网友评论