Div的内部容器飞越容器上点击

我有4个格在一个容器中，这样Div的内部容器飞越容器上点击

.container{ 
    width:500px; 
    height:450px; 
    margin:0 auto; 
    border:1px solid blue; 
} 
.box1{ 
    background-color:#F00; 
    width:350px; 
    height:450px; 
    float:left; 
} 

.box2{ 
    background-color:#0F0; 
    width:150px; 
    height:150px; 
    float:right;  
} 

<div class="container"> 
    <div class="box1"></div> 
    <div class="box2"></div> 
    <div class="box2"></div> 
    <div class="box2"></div> 
</div>

我想上单击（在容器或任何DIV），所有的div里面的容器飞，去关闭屏幕（如爆炸）。我可以用jQuery做动画，但我找不到如何将div放在容器外。有什么想法？

来源

2012-08-01 kek

那么你需要做的第一件事就是制定出每个DIV的结束坐标。大概你想要一个人到左上角，一个到右上角等等。这实际上是你的挑战。 – Utkanos 2012-08-01 10:29:55

可以使用animate功能：

$(".container").click(function() 
{ 
    $(".box1").animate({top: "-200px", left: "-400px" }, 1000); 
    $(".box2").animate({top: "-300px", left: "100px" }, 1000); 
    $(".box3").animate({top: "-500px", left: "-200px" }, 1000); 
    $(".box4").animate({top: "100px", left: "-500px" }, 1000); 
});

其中top和left属性可以是任何你喜欢的，但让他们一负让他们去关闭屏幕。

您也可以将它们进行修改以bottom和right让他们去掉对方关闭屏幕，但你需要一个相当高的值（如2000年）

来源

2012-08-01 10:35:14

似乎不起作用，因为盒子在容器中，容器不动。在开始时，容器在页面上居中（盒子也是如此），点击后，这些盒子就会出现在屏幕外... – kek 2012-08-01 10:51:51

想想我明白了，盒子必须处于“相对”的位置。不管怎么说，还是要谢谢你：） – kek 2012-08-01 11:12:16

Div的内部容器飞越容器上点击

回答

相关问题