Javascript 如何使用扩展div创建Windows8外观？_Javascript_Jquery_Jquery Ui

Javascript 如何使用扩展div创建Windows8外观？

javascript jquery jquery-ui

Javascript 如何使用扩展div创建Windows8外观？,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我正在尝试为一个类似拼图的游戏创建一个交互式用户界面，其中我为一个容器设置了一个宽度，其中有6个方形分区（每个分区将为150x150px）。1 div将在页面加载时展开打开。一次只能打开一个div。如果单击另一个div，则打开的div必须先关闭，然后所有div都会滑过，以便为单击以打开和展开的div腾出空间。当它们滑动时，它们不能相互重叠。当div扩展时，其测量值为300x300px 关于如何开始有什么想法吗？我试着使用jQuery.animate，但是在继续新的单击操作之前，当我反转上一次单击

我正在尝试为一个类似拼图的游戏创建一个交互式用户界面，其中我为一个容器设置了一个宽度，其中有6个方形分区（每个分区将为150x150px）。1 div将在页面加载时展开打开。一次只能打开一个div。如果单击另一个div，则打开的div必须先关闭，然后所有div都会滑过，以便为单击以打开和展开的div腾出空间。当它们滑动时，它们不能相互重叠。当div扩展时，其测量值为300x300px

关于如何开始有什么想法吗？我试着使用jQuery.animate，但是在继续新的单击操作之前，当我反转上一次单击的操作时，代码变得一团糟

抱歉这么抽象，让我知道是否需要澄清。这是我到目前为止建立的…（有很多意大利面代码）。我也在做这个-$（'.yellow、.blue、.black、.grey、.purple、.pmadbig、.pmadsmall、.cache'）.attr（'style'，''）；只是为了清除之前所做的一切并重置谜题。我需要它完全正确地反转，而不是仅仅弹回原位

                <!DOCTYPE html>

            <html>
            <head>

                <style type="text/css">


                .box { color: #222 }
                .wrap {

                background: none repeat scroll 0 0 #FFFFFF;
                border: 0;


                width: 750px;
                margin-right:auto;
                margin-left:auto;
                height:400px;
                border-right:1px red solid;
                border-left:1px red solid;

                position:relative;
                }

                .wrap1 {

                background: none repeat scroll 0 0 #FFFFFF;
                border: 0;
                border-right:1px red solid;
                border-left:1px red solid;


                width: 750px;
                margin-right:auto;
                margin-left:auto;
                height:75px;

                position:relative;
                }

                .yellow{
                background-color:#ffdbac;
                float: left;
                font-size: 11px;

                position:absolute;
                width: 150px;
                height:150px;
                }
                .blue{
                background-color:#007fff;
                float: left;
                font-size: 11px;
                left:150px;
                position:absolute;
                top:150px;
                width: 150px;
                height:150px;
                }
                .purple{
                background-color:#4d2177;
                float: left;
                font-size: 11px;
                left:450px;
                position:absolute;
                width: 150px;
                height:150px;
                }
                .black{
                background-color:#000000;
                position:absolute;

                color:white;
                left:300px;
                   float: left;
                font-size: 11px;


                width: 150px;
                height:150px;
                }
                .grey{
                background-color:#acacac;
                float:right;
                position:absolute;
                top:150px;
                left:300px;
                float: left;
                font-size: 11px;


                width: 150px;
                height:150px;
                }

                .green{
                background-color:green;
                float:right;
                position:absolute;
                top:150px;
                left:450px;
                float: left;
                font-size: 11px;


                width: 150px;
                height:150px;
                }
                .red{
                background-color:#cc0000;
                float:right;
                position:absolute;
                top:0px;
                left:600px;
                float: left;
                font-size: 11px;


                width: 150px;
                height:75px;
                }
                .pmadbig{
                width:300px;
                height:100px;
                background-color:pink;
                bottom:0px;
                position:absolute;
                display:none;
                }

                .pmadsmall{
                width:150px;
                height:75px;
                background-color:pink;
                bottom:0px;
                position:absolute;
                display:block;
                }
                .cache{
                width:300px;
                height:75px;
                background-color:yellow;
                position:absolute;
                top:300px;
                display:none;
                }
                </style>
                <script src=
                "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                <script type="text/javascript">
            $(document).ready(function(){







                $('.yellow').click(function() {
                $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', '');
                $('.green').css('left','450px');

                $('.yellow').animate({
                width: '300',
                height: '400',
                top: '0'
                }, 250, function() {
                // Animation complete.
                });
                $('.pmadsmall').hide();
                $('.grey, .black').animate({
                left: '450'
                }, 250, function() {
                });

                $('.blue').animate({
                left: '300'
                }, 250, function() {
                });
                $('.purple, .green').animate({
                left: '600'
                }, 250, function() {

                $('.pmadbig').show();
                });



                });








                $('.blue').click(function() {
                $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', '');
                $('.green').css('left','450px');


                $('.blue').animate({
                width: '300',
                height: '375',
                top: '0'
                }, 250, function() {
                // Animation complete.
                });

                $('.grey, .black').animate({
                left: '450'
                }, 250, function() {

                });

                $('.purple, .green').animate({
                left: '600'
                }, 250, function() {
                $('.blue').append($('.cache'));
                $('.cache').slideDown();
                });


                });








                $('.purple').click(function() {
                $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', '');
                $('.green').css('left','450px');
                $('.blue').animate({
                left: '0'
                }, 250, function() {
                $('.grey').animate({
                left: '150'
                }, 250, function() {
                $('.green').animate({
                left: '300'
                }, 250, function() {
                $('.purple').animate({
                width: '300',
                height: '375'
                }, 250, function() {
                $('.purple').append($('.cache'));
                $('.cache').slideDown();
                });
                });
                });
                });


                });






                $('.black').click(function() {

                $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', '');
                $('.green').css('left','450px');



                $('.blue').animate({
                left: '0'
                }, 250, function() {
                $('.grey').animate({
                left: '150'
                }, 250, function() {
                $('.purple, .green').animate({
                left: '600'
                }, 250, function() {

                $('.black').animate({
                width: '300',
                height: '375'
                }, 250, function() {
                $('.black').append($('.cache'));
                $('.cache').slideDown();
                });
                });
                });
                });





                $('.grey').click(function() {
                $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', '');
                $('.green').css('left','450px');


                $('.black').animate({
                left: '150'
                }, 250, function() {


                $('.grey').animate({
                width: '300',
                height: '375'
                }, 250, function() {
                $('.grey').append($('.cache'));
                $('.cache').slideDown();
                });

                });
                });
                });














                $('.grey').click(function() {
                $('.yellow, .blue, .black, .grey, .purple, .pmadbig, .pmadsmall, .cache').attr('style', '');
                $('.green').css('left','450px');

                $('.black').animate({
                left: '150'
                }, 250, function() {
                $('.green, .purple').animate({
                left: '600'
                }, 250, function() {

                $('.grey').animate({
                width: '300',
                top: '0px',
                height: '375'
                }, 250, function() {
                $('.grey').append($('.cache'));
                $('.cache').slideDown();
                });
                });



                });
                });








                $('.green').click(function() {
                //$('div').attr('style', '');
                if(typeof greenOpen == "undefined"){
                greenOpen = false;
                }

                if(greenOpen == false){
                $('.green').animate({
                height: '225'
                }, 250, function() {
                greenOpen = true;
                });
                }
                else{

                $('.green').animate({
                height: '150'
                }, 250, function() {
                greenOpen = false;
                });
                }
                });




                $('.red').click(function() {
                //$('div').attr('style', '');
                if(typeof redOpen == "undefined"){
                redOpen = false;
                }

                if(redOpen == false){
                $('.red').animate({
                left: '450',
                width: '300'
                }, 250, function() {
                redOpen = true;
                });
                }
                else{

                $('.red').animate({
                left: '600',
                width: '150'
                }, 250, function() {
                redOpen = false;
                });
                }
                });


                function start(){
                $('.blue').trigger('click');
                }
                setTimeout(start,500);


                });  
                </script>

                <title></title>
            </head>

            <body>
                <div id="wrapper">
                    <div class="wrap">
                        <div>
                            <div class="yellow">
                                <p>elephant</p>

                                <div class="pmadsmall">
                                    <p>bonus points area</p>
                                </div>

                                <div class="pmadbig">
                                    <p>pm ad big</p>
                                </div>
                            </div>

                            <div class="blue" style="float:righr;">
                                <p>tiger</p>
                            </div>
                        </div>

                        <div class="black">
                            <p>giraffe</p>
                        </div>

                        <div class="purple">
                            <p>monkey</p>
                        </div>

                        <div class="grey">
                            <p>snake</p>
                        </div>

                        <div class="green">
                            <p>bird</p>
                        </div>
                    </div>

                    <div class="cache">
                        <p>bonus points area</p>
                    </div><!-- END WRAPPER -->
                </div>
            </body>
            </html>


.box{颜色：#222}
.包裹{
背景：无重复滚动0 0#FFFFFF；
边界：0；
宽度：750px；
右边距：自动；
左边距：自动；
高度：400px；
右边框：1px红色实心；
左边框：1px红色实心；
位置：相对位置；
}
.wrap1{
背景：无重复滚动0 0#FFFFFF；
边界：0；
右边框：1px红色实心；
左边框：1px红色实心；
宽度：750px；
右边距：自动；
左边距：自动；
高度：75px；
位置：相对位置；
}
黄先生{
背景色：#ffdbac；
浮动：左；
字体大小：11px；
位置：绝对位置；
宽度：150px；
高度：150像素；
}
蓝先生{
背景色：#007fff；
浮动：左；
字体大小：11px；
左：150px；
位置：绝对位置；
顶部：150px；
宽度：150px；
高度：150像素；
}
紫色{
背景色：#4d2177；
浮动：左；
字体大小：11px；
左：450px；
位置：绝对位置；
宽度：150px；
高度：150像素；
}
布莱克先生{
背景色：#000000；
位置：绝对位置；
颜色：白色；
左：300px；
浮动：左；
字体大小：11px；
宽度：150px；
高度：150像素；
}
格雷先生{
背景色：#acacac；
浮动：对；
位置：绝对位置；
顶部：150px；
左：300px；
浮动：左；
字体大小：11px；
宽度：150px；
高度：150像素；
}
格林先生{
背景颜色：绿色；
浮动：对；
位置：绝对位置；
顶部：150px；
左：450px；
浮动：左；
字体大小：11px；
宽度：150px；
高度：150像素；
}
瑞德先生{
背景色：#cc0000；
浮动：对；
位置：绝对位置；
顶部：0px；
左：600px；
浮动：左；
字体大小：11px；
宽度：150px；
高度：75px；
}
pmadbig先生{
宽度：300px；
高度：100px；
背景颜色：粉红色；
底部：0px；
位置：绝对位置；
显示：无；
}
.pmadsmall{
宽度：150px；
高度：75px；
背景颜色：粉红色；
底部：0px；
位置：绝对位置；
显示：块；
}
.缓存{
宽度：300px；
高度：75px；
背景颜色：黄色；
位置：绝对位置；
顶部：300px；
显示：无；
}
$（文档）.ready（函数（）{
$（'.yellow'）。单击（函数（）{
$（'.yellow、.blue、.black、.grey、.purple、.pmadbig、.pmadsmall、.cache'）.attr（'样式'，''）；
$（'.green'）.css（'left'，'450px'）；
$（'.yellow'）。设置动画({
宽度：“300”，
高度：'400'，
顶部：“0”
}，250，函数（）{
//动画完成。
});
$（'.pmadsmall'）.hide（）；
$（'.grey，.black'）。设置动画({
左：“450”
}，250，函数（）{
});
$（'.blue'）。设置动画({
左：“300”
}，250，函数（）{
});
$（'.purple，.green'）。设置动画({
左：“600”
}，250，函数（）{
$（'.pmadbig'）.show（）；
});
});
$（'.blue'）。单击（函数（）{
$（'.yellow、.blue、.black、.grey、.purple、.pmadbig、.pmadsmall、.cache'）.attr（'样式'，''）；
$（'.green'）.css（'left'，'450px'）；