轻量级jQuery全屏翻页插件-爱编程

轻量级jQuery全屏翻页插件

来源：htmleaf 阅读：8 时间：2018-02-03 03:20

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

在线预览源码下载