!
也想出现在这里? 联系我们
广告位

[代码样式]pagePiling.js – jQuery全屏滚动插件

[代码样式]pagePiling.js – jQuery全屏滚动插件

简介

全屏滚动插件已经介绍很多款了,如功能强大的fullPage.js、可任意定义动画的fullPage。今天再介绍一款 —— pagePiling.js,与其他的全屏滚动插件相比,pagePiling.js 的主要特点是滚动方式,它把所有“页面”叠在一起,使用 translate3d “抽”动页面,产生了一种类似“视觉差”的效果。

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/jquery.pagepiling.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.pagepiling.min.js"></script>

2、HTML

<div id="dowebok">
    <div class="section"><h3>第一屏</h3></div>
    <div class="section"><h3>第二屏</h3></div>
    <div class="section"><h3>第三屏</h3></div>
    <div class="section"><h3>第四屏</h3></div>
</div>

3、JavaScript

$(function(){
    $('#dowebok').pagepiling();
});

配置

1、选项

属性/方法 类型 默认值 说明
menu 字符串 null 绑定菜单
direction 字符串 vertical 滚动方向,可选 vertical(垂直/竖向) 或 horizontal(水平/横向)
verticalCentered 布尔值 true 内容垂直居中
sectionsColor 数组 [] “每一屏”的背景颜色
anchors 数组 [] 锚链接名称
scrollingSpeed 整数 700 动画时间
easing 字符串 swing 动画方式
loopBottom 布尔值 false 滚动到底部后循环滚动
loopTop 布尔值 false 滚动到顶部后循环滚动
css3 布尔值 true 使用 css3 动画,如果浏览器不支持,则自动推到 js 动画
navigation 对象 定义导航文字颜色、背景颜色、位置和 tooltip
normalScrollElements 字符串 null 避免在某些元素上自动滚动,如地图,有滚动条的 div 等
normalScrollElementTouchThreshold 整数 5 设定一个阈值,以便在移动设备上滑动定义了 normalScrollElements 的元素
touchSensitivity 整数 5 触摸灵敏度
keyboardScrolling 布尔值 true 使用键盘控制
sectionSelector 字符串 .section 每一屏的选择
animateAnchor 布尔值 false 是否以动画的方式滚动到某一个锚链接
afterRender 页面初始化后的回调函数
onLeave 滚动前的回调函数
function(index, nextIndex, direction){}
afterLoad 滚动后的回调函数
function(anchorLink, index){}

2、自定义方法

名称 说明
moveSectionUp() 向上滚动,使用方法:
$.fn.pagepiling.moveSectionUp();
moveSectionDown() 向下滚动,使用方法:
$.fn.pagepiling.moveSectionDown();
moveTo(section) 滚动到某一屏,使用方法:
$.fn.pagepiling.moveTo(3);
或者:
$.fn.pagepiling.moveTo(‘page3’);
setAllowScrolling(boolean) 允许/禁止滚动,使用方法:
$.fn.pagepiling.setAllowScrolling(false);
setKeyboardScrolling(boolean) 启用/禁止键盘控制,使用方法:
$.fn.pagepiling.setKeyboardScrolling(false);
setScrollingSpeed(milliseconds) 设置动画时间,使用方法:
$.fn.pagepiling.setScrollingSpeed(800);

GitHub 地址:https://github.com/alvarotrigo/pagePiling.js


[b2_file link="

百度网盘" name="pagePiling.js – jQuery全屏滚动插件" pass="" code=""]

给TA打赏
共{{data.count}}人
人已打赏
脚本代码

[代码样式]Chained – jQuery/Zepto级联下拉框插件

2020-9-10 17:14:52

脚本代码

[代码样式]jqueryrotate制作机锋网积分抽奖效果

2020-9-10 17:14:54

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索