0

我有一个包含小 div 和一个空白空间的 div 作为起点。我想要做的是，当我单击与空白空间接壤的任何 div 时，单击的 div 必须移动到该空白空间并创建另一个空白空间，然后单击该空白空间将被附近的任何其他 div 占用。这个想法是小 div 必须有自动机制来决定移动的位置将/必须用 css 位置控制。我是 jquery 的新手，任何建议都将不胜感激，这是我的代码，我刚从两行 div 开始，但在我转到 4 行之前我无法做到这一点

<html>
    <head> 
    <title>divs</title>
        <link rel="stylesheet" media="all" type="text/css" href="css/main.css"/>
        <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    </head>
<script type="text/javascript">
    $(document).ready(function() {
        var goTo= new Array("2,5","1,3,6","2,4,7","3,8","1,6","2,5,7","3,7,8","4,7");
        var position= new Array("0,0","0,0,60","0,0,120","0,180","0,60","0,0,120","0,60,180","0,120");
        var here=8;
        var click=true;
        $(".box").click(function(){
            if(click==true){
                click=false;
                var id=$(this).attr("id");
                id=id.split("_");
                id=parseInt(id[1]);
                id--;
                var adjacents=goTo[id];
                adjacents=adjacents.split(",");
                var move=false;
                for(i in adjacents){
                    if(adjacents[i]==here){
                        move=true;
                    }
                }
                if(move==true){
                    var movePos=position[(here-1)];
                    alert(movePos);
                        movePos=movePos.split(",")
                    $(this).animate({top:movePos[0],left:movePos[1]},1000,function(){
                        $(this).attr("id","box_"+here);
                        here=id+1;
                        click=true;
                    })
                }
                else{
                    click=true;
                }
            }


        });

    });
</script>
    <body>
        <div id="container">

                <div id="box_1" class="box" style="background:yellow;top:0px;left:0px;">
                    1
                </div>
                <div id="box_2" class="box" style="background:red;top:0px;left:60px;">
                    2
                </div>
                <div id="box_3" class="box" style="background:magenta;display:block;top:0px;left:120px;">
                    3
                </div>

                <div id="box_4" class="box" style="background:brown;top:0px;left:180px;">
                    4
                </div>
                <div id="box_5" class="box" style=" background:orange;top:60px;left:0px;">
                    5
                </div>
                <div id="box_6" class="box" style="background:pink;top:60px;left:60px;">
                    6
                </div>
                <div id="box_7" class="box" style="background:green;top:60px;left:120px;">
                    7
                </div>

        </div>
    </body>
</html>
4

1 回答 1

0

嗨，您可以继续在那个大 div 中创建相同数量的小 div。并使其中一个小 div 透明。接下来单击该透明附近的一些 div，将单击的 div 的 css 更改为透明的，反之亦然。使用 jQuery 交换 css

于 2012-08-18T22:00:37.193 回答