最新消息:欢迎加入小松的QQ群一起讨论一起学习,本站启用elasticsearch全文检索系统,提供搜索的精确度

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

前端技术 812浏览 0评论

最近要做个手机端全屏滑动的功能,找了很久,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配置参数

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

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» jquery插件pagepiling手机全屏滚动网站
本文链接地址:https://www.phpsong.com/1457.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!