Javascript 关于运动图像的JQuery建议？_Javascript_Jquery

Javascript 关于运动图像的JQuery建议？

javascript jquery

Javascript 关于运动图像的JQuery建议？,javascript,jquery,Javascript,Jquery,我正在尝试创建一个网页，你可以在上面玩纸牌游戏。此页面的一部分包括滑到页面底部的卡，然后淡出（如果两张卡匹配）由于我正在使用电脑上保存的图像进行纸牌游戏，我想知道是否有人能为我指出正确的方向，告诉我如何处理这个问题我猜JQuery本身必须是一个事件，只有满足某些if/else逻辑时才会发生到目前为止，我对JQuery的了解是： <script type="text/javascript"> $document.ready(function(){ $("

我正在尝试创建一个网页，你可以在上面玩纸牌游戏。此页面的一部分包括滑到页面底部的卡，然后淡出（如果两张卡匹配）

由于我正在使用电脑上保存的图像进行纸牌游戏，我想知道是否有人能为我指出正确的方向，告诉我如何处理这个问题

我猜JQuery本身必须是一个事件，只有满足某些if/else逻辑时才会发生

到目前为止，我对JQuery的了解是：

 <script type="text/javascript">
    $document.ready(function(){
        $("img").click(function(){
            $("card1").animate({
                down:'100px';
                opacity:'0.0';
            });
        });
    });
 </script>


$document.ready（函数（）{
$（“img”）。单击（函数（）{
$（“card1”）。设置动画({
向下：'100px'；
不透明度：'0.0'；
});
});
});

“img”应该是我保存在电脑上的本地图像，对吗

此外，我真的不确定如何实现JQuery，因为没有单击按钮来启动动画，它必须嵌套在if/else逻辑中，以确认卡是否匹配。这会是一种“开…”的活动吗？可以将jquery代码块设置为函数吗？所以打电话很容易

此外，jQuery必须移动同一图像的两个副本，它们可能位于网页上的任何位置，那么有没有办法让这两个副本都移动到页面底部，而不仅仅是固定数量的像素

您可以在jQuery中包含事件吗？就像我希望在两幅图像到达页面底部时淡出一样

非常感谢所有帮助/建议：））

编辑****这是我到目前为止的代码…还有很多事情要做

<!DOCTYPE html>
<html>
<head>
    <style>
    table {
            border-collapse: collapse;
            width: 80%;

        }
    td, th{
        width: 100px;
        height: 200px;
        border: 2px solid black;
        text-align: center;

    }
    h1{
        text-shadow: 2px 2px #FF0000;
    }
    </style>
</head>
<body>
    <center>
        <h1>Concentration</h1>

        <table border=1 id="myTable">
            <tr>
                <th id="1"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="2"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="3"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="4"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="5"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="6"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="7"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="8"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="9"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="10"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
            </tr>
            <tr>
                <th id="11"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="12"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="13"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="14"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="15"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="16"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="17"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="18"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="19"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="20"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
            </tr>
            <tr>
                <th id="21"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="22"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="23"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="24"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="25"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="26"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="27"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="28"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="29"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="30"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
            </tr>
            <tr>
                <th id="31"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="32"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="33"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="34"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="35"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="36"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="37"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="38"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="39"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="40"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
            </tr>
            <tr>
                <th id="41"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="42"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="43"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="44"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="45"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="46"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="47"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="48"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="49"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="50"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
            </tr>
            <tr>
                <th id="51"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>
                <th id="52"><img src="./card-BMPs/back.bmp" alt="Mountain View" style="width:71px;height:96px;"></th>

            </tr>

        </table>

    </center>
    <script>
        var amountOfCards = 52;
        var deck[amountOfCards];
        function CreateDeck(){
            deck[0] = new Card() deck[1] = new Card() deck[2] = new Card() deck[3] = new Card() deck[4] = new Card() deck[5] = new Card() deck[6] = new Card() deck[7] = new Card() deck[8] = new Card() deck[9] = new Card() deck[10] = new Card() deck[11] = new Card() deck[12] = new Card() deck[13] = new Card() deck[14] = new Card() deck[15] = new Card() deck[16] = new Card() deck[17] = new Card() deck[18] = new Card() deck[19] = new Card() deck[20] = new Card() deck[21] = new Card() deck[22] = new Card() deck[23] = new Card() deck[24] = new Card() deck[25] = new Card() deck[26] = new Card()
            for(var i = 0; i < 25; i++){
                deck[] = new Card() } deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() deck[0] = new Card() }
    function Card(t, val, id, src)
    {this.id = id;
        this.type = t; this.src =src;
        this.value = val;
        this.flipped = false; }

    function isMatch(card1, card2){
        if(card1.type == card2.type && card1.value == card2.value)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    function exists(card){ }


    $document.ready(function(){
        $("img").click(function(){
            $("card1").animate({
                down:'100px';
                opacity:'0.0';
                });
            });
        });
        </script>
</body>


桌子{
边界塌陷：塌陷；
宽度：80%；
}
td，th{
宽度：100px；
高度：200px；
边框：2件纯黑；
文本对齐：居中；
}
h1{
文本阴影：2px 2px#FF0000；
}
浓度
var amountOfCards=52；
var甲板[数量板]；
函数CreateDeck（）{
卡片组[0]=新卡片组[1]=新卡片组[2]=新卡片组[3]=新卡片组[4]=新卡片组[5]=新卡片组[6]=新卡片组[7]=新卡片组[8]=新卡片组[9]=新卡片组[10]=新卡片组[11]=新卡片组[12]=新卡片组[13]=新卡片组[14]=新卡片组[15]=新卡片组[16]新卡牌[17]=新卡牌[18]=新卡牌[19]=新卡牌[20]=新卡牌[21]=新卡牌[22]=新卡牌[23]=新卡牌[24]=新卡牌[25]=新卡牌[26]=新卡
对于（变量i=0；i<25；i++）{
卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组[0]=新卡片组]=新卡（）牌组[0]=新卡（）牌组[0]=新卡（）牌组[0]=新卡（）}
功能卡（t、val、id、src）
{this.id=id；
this.type=t；this.src=src；
this.value=val；
this.flipped=false；}
功能isMatch（卡1、卡2）{
if（card1.type==card2.type&&card1.value==card2.value）
{
返回true；
}
其他的
{
返回false；
}
}
函数存在（卡）{}
$document.ready（函数（）{
$（“img”）。单击（函数（）{
$（“card1”）。设置动画({
向下：'100px'；
不透明度：'0.0'；
});
});
});

您可以调用

$（“card1”）。从if/else内部设置（{…}）动画。如果您想显示游戏中的相关代码，我们可能会建议将.animate（）
调用放在何处。请注意，$（“card1”）
正在查找标记
，而这可能不是您所拥有的。假设它是一个ID，它将是$（“#card1”）
，但注意ID的定义必须是唯一的。显示一些html@nnnnnn到目前为止，我想知道这里提供的可拖放和相关交互是否有帮助？您可以调用$（“card1”）.animate（{…}）
从if/else内部。如果您想问问题以显示游戏中的相关代码，我们可能会建议将.animate（）
调用放在何处。请注意，$（“card1”）
正在查找标签
，而这可能不是您所拥有的标签。假设它是一个ID，它将是$（“\card1”）
但也请注意，ID的定义必须是唯一的。展示一些html@nnnnnn到目前为止，我想知道这里提供的可拖放和相关交互是否有帮助？