0

好吧，这就是现在的交易，我有一个固定高度为 182 x 182 像素的 div，它们向左浮动，因此它们水平对齐。我需要做的是，一旦单击了这些 div 之一，我需要所有这些 div 尽可能从水平动画到垂直动画。如果您能指出我的简单插件或编写代码，那就太棒了，谢谢！

例子：

|-------| |-------| |-------| 
|   1   | |   2   | |   3   | <-- Box 1 is clicked, boxes 2 and 3 need to 
|_______| |_______| |_______|     be animated vertically don't necessarily  
              |                   have to move in straight lines they can
|-------|     V         |         float over or on top of eachother as long as
|   2   |   <--         |         they animate from horizontal to vertical.
|_______|               |
                        |
|-------|               V
|   3   |      <----
|_______|
4

1 回答 1

4

我总是喜欢写这样的脚本。JSFiddle 目前有很多问题，所以用 codepen 代替：

http://codepen.io/anon/pen/yIhDK

以及未来保存的代码

HTML：

<div id="boxcontainer">
  <div class="box box1"></div>
  <div class="box box2"></div> 
  <div class="box box3"></div>
</div>

CSS：

#boxcontainer {
  position: relative;
}
.box {
  width: 182px;
  height: 182px;
  border: 5px solid black;
  margin: 5px;
  float: left;
  position: relative;
}

JS：

$(function(){
  $(".box1").click(function(){
    $(".box").each(function(){
      var width = $(this).outerWidth(true),
          height = $(this).outerHeight(true),
          nrTop = Math.floor($(this).position().top / height),
            nrLeft = Math.floor($(this).position().left / width),
          top = (nrLeft-nrTop)*height,
          left = (nrTop-nrLeft)*width;
      console.log(width, height, nrTop, nrLeft, top, left);
      $(this).animate({
        "top": "+="+top+"px",
        "left": "+="+left+"px"
      }, "slow");
    });
  });
});

它背后的想法是，它为某个盒子计算它是左边的盒子n，并将其放在顶部的位置n。（反之亦然）

于 2012-11-08T14:11:31.593 回答