当前位置：首页 > 网页特效 > 动画效果

轻量级jQuery全屏翻页插件

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

轻量级jQuery全屏翻页插件

简介

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

```html
<script src="jquery.min.js" type="text/javascript"></script>
<script src="naiveScroll.min.js" type="text/javascript"
```></script>                  
#####  HTML结构
使用section元素作为每一个分段页面的标签，不需要在添加额外的class类。你也可以修改js代码来使用其它标签作为分段标签。

```html
<body>
    <section></section>
    <section></section>
    <section></section>
</body>  
```
#####  CSS样式
你可以为每一个section分段设置不同的背景颜色，同时为各个分段设置必要的top属性。

```html
<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元素加载完毕之后，可以通过下面的方法来初始化该全屏翻页插件。

```html
$(document).ready(function() {
      $(this)._naiveScroll.init();
});    
```    
#####  事件
你可以通过按钮来触发页面的向上滚动或向下滚动。

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

web299.com

轻量级jQuery全屏翻页插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果