vim创建折叠_使用OriDomi创建折叠纸效果-CSDN博客

vim创建折叠

许多使用众所周知的框架（例如Bootstrap）构建的网站彼此之间非常相似。我不反对使用它们。相反，我很高兴，由于有了这些框架，很多人甚至可以在很少了解的情况下就能够创建自己的网站。但是，每个网站都需要以某种方式不同才能被识别。不同并不意味着您必须创建令人难以置信的布局或惊人的动画，还可以添加一些小的效果。

在本文中，我将向您展示如何使用称为OriDomi的库创建折叠效果。这种效果可能只是您的网站所需的类。

什么是OriDomi？

OriDomi （将“ Origami”和“ DOM”组合在一起的有趣词）是一个用于折叠纸之类的DOM元素的库。我发现其效果简单但非常有效，我认为它非常适合餐馆和酒吧网站。 OriDomi没有任何依赖性，因此您不必使用很多其他库来填充您的网页。但是，该库也可以用作jQuery插件。它在jQuery插件注册表中非常流行，因此您可能已经听说过。

为了让您了解它的作用，下面是一个简单的示例：

感兴趣吗？你应该！这只是您可以在页面中创建的效果之一。让我们发现更多。

OriDomi入门

OriDomi入门非常容易。您需要执行的第一步是下载库并将其包含在页面中。您可以通过访问其GitHub存储库或通过著名的Web依赖管理器Bower输入以下命令来获取OriDomi：

[贝壳]
凉亭安装oridomi
[/贝壳]

下载该库后，必须使用通常的<script>标记将其包含在页面中，如下所示：

<script src="path/to/oridomi/oridomi.min.js"></script>

至此，您可以在所需的任何元素上使用它了。元素必须传递给必须作为构造函数调用的OriDomi()方法（使用new关键字）。使用该库的最小示例如下所示：

new OriDomi(document.getElementById('element'));

另外，您可以将选择器传递给方法，如我们在本文的第一个演示中所见。在这种情况下，该效果将应用于匹配的第一个元素：

new OriDomi('.my-class');

值得注意的是，尽管效果不管元素的类型如何以及是否具有背景都可以工作，但该库在与图像或具有背景图像的元素一起使用时效果最佳。

以下示例显示了对没有背景图像的div元素的影响：

请注意，元素是如何应用效果的，但看起来并不那么好。

既然我们已经了解了OriDomi的基础知识，那么让我们讨论一下如何调整默认设置。

选件

创建新的OriDomi合成时，您可以传递对象文字来指定要应用的选项作为第二个参数。 OriDomi提供了几种配置效果的选项。

从左侧或右侧折叠元素时，库会将元素分为五个面板。以类似的方式，当从顶部或底部折叠元素时，默认情况下，OriDomi会将元素分为三个面板。我们可以通过分别为vPanels和hPanels选项传递不同的值来更改这些默认值。

我们可以配置的另一个选项是speed ，它指示动画执行的速度。默认值为700毫秒。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

注意：在撰写本文时，默认速度为1200毫秒。但是，看一下代码，您可以看到实际上是700毫秒。

如果要禁用用户与元素交互的可能性，例如，如果您仅想以编程方式应用效果，则可以将touchEnabled属性设置为true 。关于交互，在执行给定操作后，OriDomi提供了一些挂钩来执行回调。例如，您可以在交互开始或完成之后运行特定功能。可用于运行回调的选项为touchStartCallback ， touchMoveCallback和touchEndCallback 。

以下示例向您展示了更改vPanels的默认值， speed以及当用户通过touchEndCallback附加回调结束结束玩元素时如何登录控制台的效果。

现在，让我们看看OriDomi还可以提供哪些其他效果。