Question

我正在尝试为自己所在的班级制作纸牌匹配游戏，并且在移动纸牌时遇到很多麻烦。图像设置在网格中。我希望他们都移到中心，随机洗几次，然后再回到原来的位置。我能够让他们走到中间去洗牌，但是当我告诉他们回到自己的位置时，他们又走了大约5次，超出了原来的空间。我在做什么错了？

排列我的图像：

<div class="row">
    <div class="container"><img id="1"></div>
    <div class="container"><img id="2"></div>
    <div class="container"><img id="3"></div>
    <div class="container"><img id="4"></div>
</div>
<div class="row">
    <div class="container"><img id="5"></div>
    <div class="container"><img id="6"></div>
    <div class="middle"></div>
    <div class="container"><img id="7"></div>
    <div class="container"><img id="8"></div>
</div>
<div class="row">
    <div class="container"><img id="9"></div>
    <div class="container"><img id="10"></div>
    <div class="container"><img id="11"></div>
    <div class="container"><img id="12"></div>
</div>

图像源稍后通过js设置。相关的CSS像这样：

img{
    height:100%;
    width:auto;
    transform:rotate(90deg);
    position:relative;
}

.container{
    height:150px;
    width:180px;
    margin:0 2em;
}

.row{
    display: flex;
    justify-content: center;
    margin: 5em 0 0 0;

应该用来移动它们的jquery是这样的：

$('img').each(function(index){
    positions[index]=$(this).offset()
})

middle=$('.middle').offset()

$('img').each(function(index){
    left=middle.left-positions[index].left-75
    top=middle.top-positions[index].top
    $(this).animate({
        left: left,
        top: top
    },600)
})

for(i=0;i<5;++i){
    $('img').each(function(index){
        if(index<6){
            $(this).animate({
                left:'-=150',
            },150).animate({
                left:'+=150'
            },150)
        }
        else{
            $(this).animate({
                left:'+=150',
            },150).animate({
                left:'-=150'
            },150)
        }
    })
}

var delay=0

$('img').each(function(index){
    left=middle.left-positions[index].left-75
    top=middle.top-positions[index].top
    $(this).delay(delay).animate({
        left: left*-1,
        top: top*-1
    },600)
    delay+=100
})

如果我将返回值的顶部和左侧变量乘以-.15而不是-1，则可以使它们返回到接近其原始位置的位置，但是当我多次运行游戏时，差异相加并得出结果控制。很抱歉，代码墙很长，谢谢您的帮助。

如何将多张图像移到一个位置，然后再移回其原始位置

0 个答案: