Question

我一直在制作一个抽奖卡的程序。我有54张牌，我想让它们单独绘制。这是我到目前为止所得到的。它读取一个数组，将其重新排列，重置它，然后用foreach放置它们。

<?
session_start();
include "array.php";
shuffle($cards);
reset($cards);
$i = 1;
foreach($cards as $card){
print <<<HERE
  <div id="$i">\n<img src="img/{$card[1]}.gif" alt="{$card[0]}" width="176" height="276"/><br/>
  <h1 style="font-family: sans-serif;">{$card[0]}</h1>\n</div><br />\n\n
HERE;
  $i++;
}

?>

每张卡的每张结果都是这样的：

<div id="1">
<img src="img/#.gif" alt="Card Name #" width="176" height="276"/><br/>
<h1 style="font-family: sans-serif;">Card Name #</h1>
</div><br />

在array.php中，有一个二维数组，它保存每张卡的路径和名称。例如：

$array = array();
$array[] = array("Card Name 1", "1");
$array[] = array("Card Name 2", "2");
$array[] ...

无论如何，我是jquery的新手，我需要帮助来创建一个动画，该动画会显示一张卡片，并按照它输出的顺序更改每次点击的图片，直到它用完为止。

如何制作此动画？我是否需要完全更改代码才能完成此操作？有更简单的方法吗？

提前致谢！

Answer 1

为你的每个div设置不透明度0并给出class =“card”

然后使用此功能

$(document).ready(function()
{
    $(".card").animate({opacity:"1"});
});

Ex：http://jsfiddle.net/FrrhZ/10/

$（“。card”）是一个jQuery选择器，用于获取类“。card”的所有元素。以上将显示每张卡片从无处出现，效果很酷。这只是一个例子，你可以用jQuery animate（）做更多的事情，看看http://api.jquery.com/animate/ 例如，您可以像这样设置速度

  $(".card").animate({opacity:"1"}, 1000);//animation to be completed in 1000 miliseconds.

或者您可以显示类似于动画的地铁，其中实体在出现时略微上升，为此添加margin-top：10px和不透明度：0到您的div然后使用此功能

$(document).ready(function anim()
    {
        $(".card").animate({opacity:"1", marginTop:"0px"}, 'slow');//animate also excepts some keywords for speed like 'slow', 'fast'
    });

Ex：http://jsfiddle.net/FrrhZ/14/

你可以通过animate（）获得更多创意，这些只是jQuery animate（）中很多可能的东西，你甚至可以链接动画，链接中提供了一切。继续探索。

Answer 2

有很多方法可以做到这一点，但这是我想到的第一个：

$(document).ready(function(){
    var i=0,
        $cards = $("div").hide();
    $cards.click(function(){
        $cards.eq(i).slideUp(function() {
            i = (i+1)%$cards.length;
            $cards.eq(i).slideDown();
        });
    }).eq(0).slideDown();
});

您应该为您的卡div分配一个公共类并更改jQuery选择器以使用它，例如$("div.card")，但一般的想法是选择所有卡片div并隐藏它们，显示第一个，然后点击无论哪一个显示隐藏它并显示下一个。

我已经对上面的内容进行了编码以保持循环，但您可以根据需要添加自己的最终操作。

演示： http://jsfiddle.net/FrrhZ/

jQuery提供了许多animation methods，您可以根据需要制作动画，但出于演示目的，我只使用了.slideUp()和.slideDown()。

顺便说一下，我会删除各个div之间的<br>元素。如果一次只显示一张卡，则不需要它们，但即使显示多个卡，div也是块元素，默认情况下会显示一个以下 - 如果需要更多间距，则通过CSS设置边距而不是添加间隔元件。

PHP和jQuery绘制数字动画

2 个答案: