Question

我终于开始为我的印刷设计组合创建一个网站。我确切地知道我正在努力实现的目标，但对网页设计来说还是一个新手，我发现我的知识存在一些局限性....

我已经使用css3过渡（目前它们仅适用于Chrome和Safari）来制作在悬停时触发的翻转卡 - 这些功能完美无缺，正是我想要的。我现在要做的就是添加一个JavaScript函数（使用jQuery），在点击时永久翻转卡片。我不希望它禁用on hover功能，这是纯css。

我发现这很难实现。

网站在这里：

www.samueljamesdesign.com

非常感谢任何帮助。

Answer 1

只需修改CSS，以便通过添加类来触发旋转。例如，更改此规则：

#card-container:hover .front {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

对此：

.card-container:hover .front,
.card-container.selected .front,{
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

请注意，您无法使用#card-container，因为在文档中拥有多个具有相同ID的元素无效。改为将card-container设为类。

点击后，使用新的CSS，让事情保持不变，你可以：

var tiles = $('#tiles .card-container');
tiles.click(function() {
    tiles.removeClass('selected');
    $(this).addClass('selected');

    //To change the image in maincontent to match the
    //one in the flipcard clicked on:
    $('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});

简单的JavaScript OnClick功能

1 个答案: