Question

通常我知道如何开始，有一些教程甚至经验，但在这一点上我甚至不知道如何调用它。也许只是通过告诉我如何正确定义这可能是我的问题的解决方案（ - ＆gt;基于名称，我可以正确搜索）。

让我们给你一个我刚刚制作的快速模型。 mockup

我正在寻找1：你怎么称呼这个，但特别是2：我将如何创造这样的？

我想创建面板，一些堆叠在彼此之上，并且通过单击每个面板上的“下一个”按钮，您可以将该面板向左移动（或向右（向后））以转到下一个贴砖。假设每个面板都是一个项目组合项目（垂直堆叠），并且在每个面板（项目组合项目）中，您可以在下一个和后面水平滑动，以便在每个图块上解释项目的一部分。

每个图块的布局由具有完整背景图像（background-size:cover）和半个宽度图块文本框的图块组成。当然，盒子的文本应该用HTML编写，而不是通过使用Photoshop“烧录”到图像中，以用于响应原因。

我认为这可以用CSS3和jQuery创建。唯一的问题是：我所有的Google搜索都没有结果，或者导致了Off-canvas导航菜单，这是我不想要的。

要回答这个问题，请： 1.定义如何调用/我可以在谷歌搜索这个 2.将我链接到一个好的教程/插件 3.写出代码，如果那么简单。

非常感谢大家！

Answer 1

使用所谓的无线电黑客实际上非常简单。您可以使用仅html和CSS （CSS3进行平滑过渡）来实现，这非常值得注意，因为jquery代表了客户下载的一大块。

基本上就是这样（在这里工作演示：http://codepen.io/anon/pen/jcgxI）：

<强> HTML

我们使用一组输入来确定应该出现哪个“标签”。无线电在这里是完美的，因为当检查一个时，所有其他的必须是未选中的。因此，请确保整个集合的属性NAME相同。

    <input type="radio" name="radio-set" id="radio-1" checked="checked"/>
    <input type="radio" name="radio-set" id="radio-2"/>
    <input type="radio" name="radio-set" id="radio-3"/>
    <input type="radio" name="radio-set" id="radio-4"/>

然后我们将我们的内容写在任何标签中（结构部分＆gt;文章似乎合适）。导航，即使可以通过单击单选按钮本身来完成也可以通过单击标签来完成，这些标签通过其属性FOR引用任何输入设置为他们所引用的ID。

<section>
    <article id="article-1">
        <h2>article 1</h2>
        <label for="radio-4"></label>
        <label for="radio-2"></label>
    </article>
    <article id="article-2">
        <h2>article 2</h2>
        <label for="radio-1"></label>
        <label for="radio-3"></label>
    </article>
    <article id="article-3">
        <h2>article 3</h2>
        <label for="radio-2"></label>
        <label for="radio-4"></label>
    </article>
    <article id="article-4">
        <h2>article 4</h2>
        <label for="radio-3"></label>
        <label for="radio-1"></label>
    </article>
</section>

<强> CSS

因为我们将使用易于风格化的标签进行导航，所以我们可以自己隐藏输入。

input{ display:none; }

将所有文章放在一起。

article{
    position:absolute;
    width:100vw;
}
article:nth-of-type(1){ left: 0    }
article:nth-of-type(2){ left: 100% }
article:nth-of-type(3){ left: 200% }
article:nth-of-type(4){ left: 300% }

我在标签中添加“箭头”（只需点击一下，在实际设计中，我会将这些字符切换为字体图标）。

label:first-of-type::before{content: "<"}
label:last-of-type::before {content: ">"}

最后，我们使用css选择器“〜”，意思是“任何兄弟元素（及其子代）”。这样，我们说“在第N个输入检查后，整个部分滑到相应的位置”。

input[id$="-1"]:checked ~ section{ transform: translateX(0)     }
input[id$="-2"]:checked ~ section{ transform: translateX(-100%) }
input[id$="-3"]:checked ~ section{ transform: translateX(-200%) }
input[id$="-4"]:checked ~ section{ transform: translateX(-300%) }

这是因为我们使用这个选择器，重要的是我们的输入在滑动标签之外和之前（这里是“部分”），这样它们就是移动标签（或其父母的兄弟姐妹）的兄弟姐妹。

因为我们想要观察移动部分，所以我们添加了一个过渡属性：

section{ transition: all 1s; }

如果你将整个HTML包装到另一个标签中（为了防止选择器“〜”的效果传播到其他部分），你可以为其他滑块使用相同的HTML结构，而不必编写任何额外的CSS！

完整的教程带有漂亮的工作演示（对于垂直版但不要担心，它与横向非常相似）可在此处找到：{{3} }

PS：在CSS中，不要忘记为转换和转换添加所有供应商前缀。请务必查看w3schools.com（编辑：从不信任w3schools但在网上查看其他地方！）以了解需要哪些前缀。例如：

-webkit-transition: all 1s;
transition: all 1s;

如何使用jQuery / CSS3创建“滑入式图库面板”？

1 个答案: