我一直在研究一个抽卡的程序。我有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 />nn
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()可能实现的许多事情中的一小部分,你甚至可以链接动画,一切都在链接中提供。继续探索。