页面打桩插件Alvaro Trigo。创建一堆滚动的部分。http://alvarotrigo.com/pagePiling/

Posted

tags:

中文标题:页面打桩插件Alvaro Trigo。创建一堆滚动的部分。http://alvarotrigo.com/pagePiling/ 原文标题:pagePiling plugin by Alvaro Trigo. Create a scrolling pile of sections. http://alvarotrigo.com/pagePiling/ 项目评级:Star:4100      Fork:672 下载地址:https://github.com/alvarotrigo/pagePiling.js 详情介绍

页面打桩.js

将你的分区一个叠一个,滚动或通过URL访问它们!

请我喝杯咖啡

插件的定制可根据要求提供一些合理的价格。请联系我。

你想拥有一个使用pilePage.js功能但不知道如何使用的网站吗?我可以以合理的价格为你做这件事。请联系我。

介绍

建议非常受欢迎,不仅适用于功能请求,也适用于编码风格的改进。

让我们做一个很棒的插件,让人们的生活更轻松!

兼容性

pagePiling.js在所有现代浏览器以及一些旧浏览器(如Internet Explorer 8、9、Opera 12等)上都能充分发挥功能。

它可以与支持CSS3的浏览器和不支持CSS3浏览器一起使用,这使它非常适合与旧浏览器兼容。

它还被设计用于手机或平板电脑等触摸设备。

特别感谢Browserstack对pagePiling.js的支持。

用法

正如你在示例文件中看到的,你需要包括插件的JavaScript文件jquery.pagepiling.js(或缩小版jquery.pagepiling.min.js)和css文件jquery.pagepiling.css,以及jQuery。可选地,如果您想使用除jQuery库中包含的linearswing效果之外的其他缓解效果,您可以添加jQuery UI库。

使用撑弓安装:

您可以选择使用bower安装pagePiling.js:

终端:

包括文件:

CDN的可选使用

如果您更喜欢使用CDN来加载所需的文件,pagePiling.js位于CDNJS中:https://cdnjs.com/libraries/pagePiling.js

必需的HTML结构

每个部分将定义为包含section类的div

默认情况下,活动部分将是第一个部分,作为主页。

初始化

您所需要做的就是在$(document).ready函数中调用插件:

设置了所有选项的更复杂的初始化可能如下所示:

重音部分

为了创建指向某个部分的链接,如果您使用带有锚链接的pagePiling.js(使用anchors选项),则可以使用普通URL链接,然后您也可以使用锚链接直接导航到某个部分。

例如:http://alvarotrigo.com/pagePiling/#page2

小心!data-anchor标签的值不能与网站上的任何ID元素(或IE的NAME元素)相同。

使用菜单

要将菜单与活动部分链接,您必须使用menu选项,并使用锚链接(#),如下选项部分所述。

创建可滚动部分

如果您希望有一个包含大量内容的部分,并因此为该部分创建滚动条,您可以通过将类pp-scrollable添加到该部分来实现:

选项

重要信息了解anchors选项数组中的值通过其在标记中的位置与类为.section的元素直接相关是很有帮助的。

注意:使用css3:true时,为了避免出现问题,菜单元素应放置在pagePiling包装器之外。否则,它将被插件本身附加到body

方法

移动分区向上()

向上滚动一节:

moveSectionDown()

向下滚动一节:

移动到(节)

将页面滚动到给定的部分。

setAllowScrolling(布尔值)

通过使用鼠标滚轮/触控板或触摸手势(默认情况下处于活动状态)添加或删除滚动部分的可能性。

setKeyboardScrolling(布尔值)

使用键盘箭头键(默认情况下处于活动状态)添加或删除滚动部分的可能性。

设置滚动速度(毫秒)

定义滚动速度(以毫秒为单位)。

回调

后负荷(anchorLinkindex

滚动结束后,一旦加载了部分,就会触发回调。

参数:

在插件中未定义anchorLinks的情况下,index参数将是唯一可使用的参数。

例子:

休假(indexnextIndexdirection

一旦用户离开一个节,在转换到新节的过程中,就会触发此回调。

参数:

例子:

渲染后()

这个回调是在生成页面结构之后立即触发的。这是您想要用来初始化其他插件或激发任何需要文档准备好的代码的回调(因为这个插件修改DOM以创建结果结构)。

例子:

资源

CSS轻松动画工具-Matthew Lein

谁在使用pagePiling.js

如果你想在这里列出你的页面。请使用URL与我联系。

捐赠

捐款将非常受欢迎:)

许可证

(麻省理工学院许可证)

版权所有(c)2014 Alvaro Trigo<;alvaro@alvarotrig

网站>;

特此免费授予任何获得许可的人

该软件和相关文档文件的副本(

“软件”),无限制地处理软件,包括

但不限于使用、复制、修改、合并、发布、,

分发、分许可和/或出售软件副本,以及

允许向其提供软件的人员这样做,但须遵守

以下条件:

上述版权声明和本许可声明应

包含在软件的所有副本或实质部分中。

软件是“按原样”提供的,没有任何形式的担保,

明示或暗示,包括但不限于

适销性、特定用途的适用性和无侵权。

在任何情况下,作者或版权持有人均不对任何

索赔、损害赔偿或其他责任,无论是在合同诉讼中,

侵权行为或其他行为,由

软件或软件的使用或其他交易。

Alvaro Trigo的fullPage插件。快速简单地创建全屏页面

创建一堆卡片

使用 ForEach 分层视图并使用 ZStack 偏移以创建一堆扑克筹码 (SwiftUI)

matlab一次性创建一堆变量

为 Wordpress 中的每个父页面创建一个子菜单

h5滚动屏幕之后,绝对定位位置不在页面最底部