动态

Question

我从9天开始使用这个脚本，我在网上发现了这个脚本，并从那里尝试添加一些代码。 脚本的要点是根据彼此之间的距离动态旋转Div。 在某种程度上它是有效的，如果你在某个时刻调整页面大小，div会转动它们的Y轴。 我主要有两个问题，第一个问题是，如果我添加新的div，它们只会显示在一个新行中。 第二个问题是那些div的位置应该改变，他们需要靠近，他们应该移动到div的左侧。 我希望有人可以提供帮助，因为我已经花了10天的时间在这上面，我无法找到解决方案。 非常感谢你

＆＃13;

＆＃13;

function myFunction(distance) {
  //add browser check currently it set for safari
  // Code for Safari
  var degree = 0;
  if (distance <= -1 && distance >= -5) {
    degree = 15;
  } else if (distance < -5 && distance >= -10) {
    degree = 25;
  } else if (distance < -10 && distance >= -15) {
    degree = 30;
  } else if (distance < -15 && distance >= -20) {
    degree = 35;
  } else if (distance < -20) {
    degree = 45;
  }

  document.getElementById("panel").style.WebkitTransform = "rotateY(" + degree + "deg)";
  document.getElementById("panel2").style.WebkitTransform = "rotateY(" + degree + "deg)";
  document.getElementById("panel3").style.WebkitTransform = "rotateY(" + degree + "deg)";
  document.getElementById("panel4").style.WebkitTransform = "rotateY(" + degree + "deg)";

  //    document.getElementById("panel").style.marginRight= "100px";
  document.getElementById("panel2").style.marginRight = "300px";
  document.getElementById("panel3").style.marginRight = "30px";
  document.getElementById("panel4").style.marginRight = "30px";

  //        document.getElementById("panel5").style.WebkitTransform = "rotateY(45deg)"; 
  //    document.getElementById("panel6").style.WebkitTransform = "rotateY(45deg)";
  // Code for IE9
  //    document.getElementById("asd").style.msTransform = "rotateY(20deg)"; 
  // Standard syntax
  //    document.getElementById("asd").style.transform = "rotateY(20deg)"; 
}

function myFunctionb() {
  document.getElementById("panel").style.WebkitTransform = "rotateY(0deg)";
  document.getElementById("panel2").style.WebkitTransform = "rotateY(0deg)";
  document.getElementById("panel3").style.WebkitTransform = "rotateY(0deg)";
  document.getElementById("panel4").style.WebkitTransform = "rotateY(0deg)";
  //    document.getElementById("panel5").style.WebkitTransform = "rotateY(0deg)"; 
  //    document.getElementById("panel6").style.WebkitTransform = "rotateY(0deg)";

}

//    need to find a better solution
var first = document.getElementById("panel");
var second = document.getElementById("panel2");
var lastpanel = document.getElementById("panel4");
var lastbox = document.getElementById("last");
var container = document.getElementById("wrapper");
var notcongainer = container.offsetLeft;

var distance = container.offsetWidth - (lastpanel.offsetWidth + lastbox.offsetLeft + 4) + notcongainer;

console.log(distance);

var myVar;
var minDistance = 10;

function check() {
  myVar = setInterval(testcheck, 100);
}


//    First I check that the boxes lenght are as much as the container
//    Then I check the distance between 2 boxes


function testcheck() {
  if (distance < minDistance) {
    myFunction(distance);
  } else {
    myFunctionb();
  }
  distance = container.offsetWidth - (lastpanel.offsetWidth + lastbox.offsetLeft + 4) + notcongainer;
  /*console.log(distance)*/
}


//ADD NEW DIV    
function addDiv() {
  var div = document.createElement('div');
  div.className = "col-box";
  div.id = "newId";
  div.innerHTML = '<div class="hover panel"><div  id= "panel3" class="front"><div class="box1"><p>New Div</p></div></div></div>';
  document.getElementById('wrapper').appendChild(div);
}

＆＃13;

body {
  background-color: #ecf0f1;
  margin: 20px;
  font-family: Arial, Tahoma;
  font-size: 20px;
  color: #666666;
  text-align: center;
}

p {
  color: #ffffff;
}

.col-box {
  width: 22%;
  position: relative;
  display: inline;
  display: inline-block;
  margin-bottom: 20px;
  z-index: 1;
}

.end {
  margin-right: 0 !important;
}


/*-=-=-=-=-=-=-=-=-=-=- */


/* Flip Panel */


/*-=-=-=-=-=-=-=-=-=-=- */

.wrapper {
  width: 80%;
  height: 200px;
  margin: 0 auto;
  background-color: #bdd3de;
  hoverflow: hidden;
  border: 1px;
}

.panel {
  margin: 0 auto;
  height: 130px;
  position: relative;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
}

.panel .front {
  text-align: center;
}

.panel .front {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 900;
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel.flip .front {
  -webkit-transform: rotateY(45deg);
  -moz-transform: rotateY(180deg);
}

.col-box:hover {
  z-index: 1000;
}

.box1 {
  background-color: #14bcc8;
  width: 160px;
  height: 60px;
  margin-left: 5px;
  padding: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

＆＃13;

<body onload="check()">


  <div id="wrapper" class="wrapper">
    <div id="first" class="col-box">
      <div class="hover panel">
        <div id="panel" class="front">
          <div class="box1">
            <p>Div 1</p>
          </div>
        </div>
      </div>
    </div>
    <div id="second" class="col-box">
      <div class="hover panel">
        <div id="panel2" class="front">
          <div class="box1">
            <p>Div 2</p>
          </div>
        </div>
      </div>
    </div>
    <div id="third" class="col-box">
      <div class="hover panel">
        <div id="panel3" class="front">
          <div class="box1">
            <p>Div 3</p>
          </div>
        </div>
      </div>
    </div>

    <div id="last" class="col-box">
      <div class="hover panel">
        <div id="panel4" class="front">
          <div class="box1">
            <p>Last Div</p>
          </div>
        </div>
      </div>
    </div>

    <button onclick="addDiv()">Add New Div</button>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

9天......那太长了。是时候退一步把它分解成更小的东西。

这还不是'答案'......但我需要为你发布一张图片。你的问题不是那么清楚，但要解释并不是一件容易的事。在你的情况下，我会显示一个图像。

现在我可以看到你在做什么了 - 这听起来不是一个任意且完全愚蠢的任务。

你有一个'东西'或'卡'或者其他的列表...所以，首先要做的事情是......如何在页面中插入新的DOM - 和/或列入该列表 - 并将列表全部放在一条线。有几种方法 - 但很可能你只能使用flexbox -

https://jsfiddle.net/sheriffderek/8eLggama - ＆gt; https://jsfiddle.net/sheriffderek/pztvhn3L（这是一个例子 - ，但它非常天真 - 你越接近这一点，你就越接近构建大多数框架 - 就像Vue 可以做得更好...... 但有利于学习！从小事开始 - 就这样做。

// will take an object with the list name and the card id
// eventuallly - you'd want the card to have more info sent in...
function addCard(infoObject) {
  var targetList = document.getElementById(infoObject.list);
  var li = document.createElement('li');
  li.classList.add('item');
  // ug! why aren't I using jQuery...
  var component = document.createElement('aside');
  component.classList.add('card');
  var title = document.createElement('h2');
  var uniqueId = idMaker.create();
  var id = document.createTextNode(uniqueId);
  title.appendChild(id);
  component.appendChild(title)
  li.appendChild(component);
  targetList.appendChild(li);
  // woah... this part is really boring...
  // this is why templating engines and JSON are so popular
  // you could also add 'remove' button etc... right?
  var removeButton = document.createElement('button');
  var removeText = document.createTextNode('x');
  removeButton.appendChild(removeText);
  removeButton.classList.add('remove-card');
  component.appendChild(removeButton);
    //
  removeButton.addEventListener('click', function() {
    var parent = document.getElementById(infoObject.list);
    idMaker.removed.push(uniqueId);
    parent.removeChild(li);
    idMaker.read();
  });
}

// start out with a few?
addCard({list: 'exampleTarget'});
addCard({list: 'exampleTarget'});
addCard({list: 'exampleTarget'});

// start a UI to add cards
var addCardButton = document.querySelector('[data-trigger="add-card"]');

addCardButton.addEventListener('click', function() {
  addCard({list: 'exampleTarget'});
});

...然后你可能绝对将卡片放在该列表项目中？这当然是一件独一无二的事情，并不容易。然后，您可以检查项目数 - 每个项目的宽度 - 并根据该项目进行变换计算？祝你好运！