jquery插件pagepiling手机全屏滚动网站

最新推荐文章于 2023-04-28 17:15:59 发布

carson

最新推荐文章于 2023-04-28 17:15:59 发布

阅读量768

点赞数

本文链接：https://blog.csdn.net/a454213722/article/details/50704249

版权

最近要做个手机端全屏滑动的功能，找了很久，pagepiling是我遇到兼容性最好的jquery插件，之前试过fullPage可以兼容性有问题，不知道是不是我下载的版本问题。
pagepiling官网：http://jquer.in/jquery-plugins-for-awesome-scrolling-and-scrollbars-on-websites/pagepiling-js/
下面是我写的demo,用来测试
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>pagepiling全屏滚动网站</title>
</head>

<body>
<style>
　　.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="jquery.pagepiling.css">
<script src="jquery.pagepiling.min.js"></script>
<div id="pagepiling">
　　<div class="section">page1</div>
　　<div class="section">page2</div>
　　<div class="section">page3</div>
　　<div class="section">page4</div>
</div>
<script>
$(function(){
　　$('#pagepiling').pagepiling({
　　　　sectionsColor: ['#00d8cc', '#00c13f', '#ff7d23', '#ff1d77']
　　});
});
</script>
</body>
</html>
英语好的请查看官方的参数说明，英语不好的没有关系，查看下面的 pagepiling配置参数
pagepiling配置参数

 
 属性/方法 类型 默认值 说明
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){}
pagepiling配置参数使用方式：
$(function(){
　　$('#pagepiling').pagepiling({
　　　　sectionsColor: ['#00d8cc', '#00c13f', '#ff7d23', '#ff1d77'],
　　　　navigation:false,
　　});
});
右边的小圆点就会消失，情况下面的图片，用来做手机端的时候，我都会加上这个参数

pagepiling可调用的方法

 
 名称 说明
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);
pagepiling可调用的方法使用方式：
$('.down-btn').click(function(){
　　$('#pagepiling').pagepiling.moveSectionDown();
})
上面的代码主要是要用按钮来触发全屏滚动
使用中发现如果配置两次这个时候插件会出问题

QQ交流群：136351212
查看原文：http://www.phpsong.com/1457.html

属性/方法	类型	默认值	说明
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){}

名称	说明
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);