javascript – 动态地在方块周围对div进行排序,并在方形边结束后旋转它们

现在我正面临下面的jsfiddle中显示的这个问题：
http://jsfiddle.net/rkqBD/2/

中间的方形div代表餐桌,桌子上的客人包围. Div现在按照圆桌排序,但我需要将它们面向正方形/桌子.问题是桌面上的客人数量是动态变化的.我如何定位它们以使每个客座椅图像面对桌面？
到目前为止这是我的代码：

$( document ).ready(function(){
  $('.circleBase').each(function(){
    var d = $(this).attr("id");
    var tbltype = $(this).attr("tbltype");
    if(tbltype==="1"){
      border = "1";
    }else { border = "999";}
      var elems='';
      var x = 0, y = 0, angle = 0;
      var rot = 0;
      if(tbltype==="1"){
        var elems = document.getElementsByClassName('info_container22 square');
        var totContent = $(this).find(elems).size();
        var increase = Math.PI * 2 / totContent;
        for (var i = 0; i < totContent; i++) {
        var elem = elems[i];
        x = (120 * Math.cos(angle) + 40);
        y = (115 * Math.sin(angle) + 60);
        elem.style.position = 'absolute';
        elem.style.left = x + 'px';
        elem.style.top = y + 'px';
        var rot = 88 + (i * (360 / totContent));
        var img = $(elems[i]).find('.img');
        img.css('-moz-transform', "rotate("+rot+"deg)");
        img.css.MozTransform = "rotate("+rot+"deg)";
        img.css('-webkit-transform', "rotate("+rot+"deg)");
        img.css('-o-transform', "rotate("+rot+"deg)");
        img.css('-ms-transform', "rotate("+rot+"deg)");
        img.css('zIndex', "10");
        angle += increase;
      }
    }
  }); 
});

解决方法:

好消息是方形表会更容易,但你需要一个不同的算法：

线路：
x =(120 * Math.cos(角度)40);
y =(115 * Math.sin(角度)60);
….和
var rot = 88(i *(360 / totContent));

应该改变.加上你不应该有角度=增加;因为它将以另一种方式计算

更详细：

你有一个方桌,所以你将有4个不同的旋转角度0,90,180,270左,下,右,顶侧分别
其次让“side_num”成为一个变量,有多少人坐在一边

当我们循环’来宾’时,’j’增加1,因为’i’直到它达到’side_num’,如果这样’j’变为0,角度以及x,y-s也被改变.

现在计算一个人坐在哪一侧：(j mod’side_num’)(因为我们有4个方面)

x和y应该基于(j mod’side_num’)计算,所以左边将具有相同的x值等.

我将更正代码,但这是它背后的理论

http://jsfiddle.net/Krisztian123/hyGrj/32/
几乎完成了：

$( document ).ready(function(){
$('.circleBase').each(function(){
var d = $(this).attr("id");
var tbltype = $(this).attr("tbltype");
if(tbltype==="1"){
border = "1";
}else { border = "999";}
       var elems='';
         var x = 0, y = 0, angle = 0;
        var rot = 0;
       if(tbltype==="1"){
      var elems = document.getElementsByClassName('info_container22 square');
        //alert(elems.length);
        var side_num = 4; //how many seats per side
     //   side_num -= 1; //technically it should be 3 
        var j = 0;
        var angles=['270','180','270','90'];

        var xs=[0,38,0,0];
        var ys=[38,0,0,0];

        var x_fix=[-50,0,0,0]
        var y_fix=[-30,130,0,0]
        var cur_side = 0; //(0,1,2,3 == left, bottom,right,top)
        var totContent = $(this).find(elems).size();
        var j = -1; //to be equal to loop index
        for (var i = 0; i < totContent; i++) {
        var elem = elems[i];
        j++; // like (0,1,2,3,4,0,1,2...)
            if (j == side_num) {
                //next side
                j = 0;
                cur_side++;
                if (cur_side == 4) {
                    alert("places are full next table");
                }
            }
        x = x_fix[cur_side] + j*xs[cur_side];
        y = y_fix[cur_side] + j*ys[cur_side];

        elem.style.position = 'absolute';
        elem.style.left = x + 'px';
        elem.style.top = y + 'px';
        var rot = angles[cur_side];
        var img = $(elems[i]).find('.img');
        img.css('-moz-transform', "rotate("+rot+"deg)");
        img.css.MozTransform = "rotate("+rot+"deg)";
        img.css('-webkit-transform', "rotate("+rot+"deg)");
        img.css('-o-transform', "rotate("+rot+"deg)");
        img.css('-ms-transform', "rotate("+rot+"deg)");
        img.css('zIndex', "10");

  }
            }
                              });

          });

javascript – 动态地在方块周围对div进行排序,并在方形边结束后旋转它们

相关文章