PHP 和 jQuery 绘制数字动画

PHP and jQuery Draw numbers animation

本文关键字：数字 动画 绘制 jQuery PHP      更新时间：2023-09-26

我一直在研究一个抽卡的程序。我有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的新手，我需要帮助创建一个动画，该动画显示卡片并按照输出的顺序更改每次单击的图片，直到用完为止。

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

提前感谢！

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

$(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提供了许多动画方法，你可以根据需要使动画变得复杂，但出于演示目的，我只是使用了.slideUp()和.slideDown()。

顺便说一下，我会从您的个人div 之间删除<br>元素。如果一次只显示一张卡片，则不需要它们，但即使要显示多张卡片，div 也是块元素，默认情况下会在下面显示一张然后另一张 - 如果您需要更多间距，请通过 CSS 设置边距而不是添加分隔符元素。

对于你的每个单独的div 设置不透明度 0 并给出 class="card"

然后使用此功能

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

例如：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.

或者你可以显示一个类似地铁的动画，其中实体在出现时稍微上升一点，为此添加边距顶部：10px 和不透明度：0到您的div，然后使用此功能

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

例如：http://jsfiddle.net/FrrhZ/14/

你可以用animate（）获得更多的创意，这些只是jQuery animate（）可能实现的许多事情中的一小部分，你甚至可以链接动画，一切都在链接中提供。继续探索。

相关文章：