Question

我正在尝试为我的客户做一些与此类似的事情 - ＆gt; Tarot Card Readings

用户点击套牌
卡片对齐，允许用户选择6张卡片。
一旦用户选择了6张牌，他就会被引导到显示他的牌的页面。

我的客户有44张卡。除了使用Php Shuffle（）之外，我对如何开始这样的应用程序一点也不了解。我不是在寻找完整的代码，而只是如何开始的指导。

Answer 1

我认为你想要做的是创建两个图像。一张图片将是一张卡片，然后另一张图片将是一张卡片。那么你想要做的是为每个图像创建一个过渡。你可以用Jquery做到这一切。 PHP可能无济于事，因为PHP不像JavaScript那样处理操作元素。

Jquery.animate将拥有您执行此操作所需的一切。如果你对css很好，你也可以优化它，因为css有它自己的过渡

$('.button').click(function(){
    $('.card').animate({
        left: 200px,
        right: 10px
    })
})

使用CSS：

@keyframes card-animate {
    from {left: 20px;}
    to {left: 300px;}
}

/* The element to apply the animation to */
.card {
    width: 100px;
    height: 50px;
    background-image: url('card.jpg');
    animation-name: card-animate;
    animation-duration: 4s;
}

编辑：

您可能需要为每张卡创建一个css类，以便它们可以进行不同的动画制作。

或者您可以创建一个Jquery动画，为其动画的每个元素添加几个像素（以便用户可以选择一张卡片。）在这种情况下，您必须使用JavaScript循环每个元素（或者更可能是JQuery））切换动画。然后，您必须在每张卡上创建一个点击事件，以便用户可以单击该卡。然后，您必须将全局变量中的点击量存储起来，以便每个侦听器都可以增加它。我建议将卡的值存储在一个数组中，然后进行测试。我还会将这个值作为HTML属性添加到您的图像中。

<img class="card" title="aSpades" />

var array = [];

$('.card').click(function(){
    if(array.length < 6){
        array.push($(this).attr('title'));
    } else { // if the user has 6 cards navigate to new page
        window.location.href = "http://www.somesite.fqd/path/to/page"
    }
}

然后，您可能必须使用PHP和隐藏输入将数组传递到带有表单的下一页。这取决于你的设置方式。我个人喜欢使用单页应用程序和js路由器，这样我就不必刷新页面，并且每个页面都存储在客户端上，以便永远不必重新加载。

Php Deck of cards洗牌和显示

1 个答案: