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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!