0

了解しました。これが今の取引です。高さが182x182ピクセルに固定され、水平方向に整列するように左に浮かぶdivがあります。私が行う必要があるのは、これらのdivの1つがクリックされたら、可能であればすべての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 に答える