html5全屏滑动插件,轻量级jQuery全屏翻页插件

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

覆盖鼠标事件进行全屏翻页。

不需要添加额外的HTML元素。

不会产生多余的事件。

提供API来手动上下翻页。

轻量级，压缩后的版本小于1KB。

使用方法

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

HTML结构

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

CSS样式

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

/* 使用背景颜色 */

.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);

});