Javascript从左侧动态添加div

标签 javascript jquery html css

目前它是从left 侧开始，将div's 添加到right 但我怎样才能让它add div 的 从左边开始。这样第一张卡片就会出现在中间并将它们添加到它后面(到左侧)。

我已经尝试设置 float: right，但它没有给出想要的结果。

var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;



var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var lastCard;
var width;
var id;



function sortCards() {
  var cards = document.getElementsByClassName("card"),
      cw = parentEl.clientWidth,
      sw = parentEl.scrollWidth,
      diff = sw - cw,
      offset = diff / (cards.length - 1 );

     for (var i = 0; i < cards.length; i++) {
       i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
     }
}

//Move card
document.getElementById("moveCard").addEventListener("click", function () {
    myMove();
});


//Start the game
document.getElementById("play").addEventListener("click", function() {
        move();
});

//Stop the game
document.getElementById("stop").addEventListener("click", function() {
    stop();
});

function move() {
    width = 1;
    id = setInterval(frame, 5);
    function frame() {
        if (width >= 100) {
            elem.style.width = 1 + '%';
            clearInterval(id);
            addCard();
            move();
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
}


function myMove() {

    var elem = lastCard;
    lastCard = lastCard.previousSibling;

    var pos = 0;
    var id = setInterval(movie, 5);
    function movie() {
        if (pos == 350) {
            clearInterval(id);
            elem.remove();
        } else {
            pos = pos + 5;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';
        }
    }


}

function addCard(){
  var div = document.createElement("div");
  div.style.position = "relative";
  div.style.color = "green";
  div.style.left = "auto";
  div.classList.add("card");
  parentEl.appendChild(div);
  lastCard = div;
  sortCards();
}


function stop() {
    elem.style.width = 1 + '%';
    clearInterval(id);
}

sortCards();
.cards {
  display: flex;
  max-width: 300px;
}

.card {
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
  flex: 0 0 50px;
  background: red;
  transition: transform .25s;
}

.cardGreen {
 height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
  flex: 0 0 50px;
  background: green;
  transition: transform .25s; 
}

#myProgress {
    position: relative;
    width: 100%;
    height: 10px;
    background-color: grey;
}
#myBar {
    position: absolute;
    width: 1%;
    height: 100%;
    background-color: green;
}

/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    /*padding: 10px;*/
    height: 300px; /* Should be removed. Only for demonstration */
}

.left, .right {
    width: 20%;
}

.middle {
    width: 60%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>
        <header>
            <h1>Simple game</h1>
        </header>

        <div class="row">
            <div class="column left" style="background-color:#aaa;">
                <div><button class="btn btn-default btn-block" id="play">Start Game</button></div>
                <div><button class="btn btn-default btn-block" id="stop">Pause</button></div>

                <div><button class="btn btn-default btn-block" id="moveCard">Move Card</button></div>
            </div>
            <div class="column middle" style="background-color:#bbb;">
                <div class='cards middle' id="cards">
                    <!--<div class='cardGreen'></div>-->
                </div>
                <div id="myProgress">
                    <div id="myBar"></div>
                </div>
            </div>
            <div class="column right" style="background-color:#ccc;">

                <h2>Tutorial</h2>
                <p>Will be here soon :)</p>
            </div>
        </div>



        <script src="gamelogic.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>
</html>

任何提示或建议都会派上用场。

最佳答案

要在父元素的开头而不是末尾添加 en 元素，请使用 prepend而不是 append

  parentEl.prepend(div);

The ParentNode.prepend method inserts a set of Node objects or DOMString objects >before the first child of the ParentNode.

虽然这不会使第一张卡片出现在中间，但您将不得不重新调整卡片的位置。

var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;



var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var lastCard;
var width;
var id;



function sortCards() {
  var cards = document.getElementsByClassName("card"),
    cw = parentEl.clientWidth,
    sw = parentEl.scrollWidth,
    diff = sw - cw,
    offset = diff / (cards.length - 1);

  for (var i = 0; i < cards.length; i++) {
    i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
  }
}

//Move card
document.getElementById("moveCard").addEventListener("click", function() {
  myMove();
});


//Start the game
document.getElementById("play").addEventListener("click", function() {
  move();
});

//Stop the game
document.getElementById("stop").addEventListener("click", function() {
  stop();
});

function move() {
  width = 1;
  id = setInterval(frame, 5);

  function frame() {
    if (width >= 100) {
      elem.style.width = 1 + '%';
      clearInterval(id);
      addCard();
      move();
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}


function myMove() {

  var elem = lastCard;
  lastCard = lastCard.previousSibling;

  var pos = 0;
  var id = setInterval(movie, 5);

  function movie() {
    if (pos == 350) {
      clearInterval(id);
      elem.remove();
    } else {
      pos = pos + 5;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }


}
var i = 1;

function addCard() {
  var div = document.createElement("div");

  div.style.left = "auto";


  div.innerHTML = i++;
  div.style.position = "relative";
  div.style.color = "green";


  div.classList.add("card");
  parentEl.prepend(div);
  lastCard = div;
  sortCards();
}


function stop() {
  elem.style.width = 1 + '%';
  clearInterval(id);
}

sortCards();
.cards {
  display: flex;
  max-width: 300px;
}

.card {
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
  flex: 0 0 50px;
  background: red;
  transition: transform .25s;
}

.cardGreen {
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
  flex: 0 0 50px;
  background: green;
  transition: transform .25s;
}

#myProgress {
  position: relative;
  width: 100%;
  height: 10px;
  background-color: grey;
}

#myBar {
  position: absolute;
  width: 1%;
  height: 100%;
  background-color: green;
}


/* Create three unequal columns that floats next to each other */

.column {
  float: left;
  /*padding: 10px;*/
  height: 300px;
  /* Should be removed. Only for demonstration */
}

.left,
.right {
  width: 20%;
}

.middle {
  width: 60%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<header>
  <h1>Simple game</h1>
</header>

<div class="row">
  <div class="column left" style="background-color:#aaa;">
    <div><button class="btn btn-default btn-block" id="play">Start Game</button></div>
    <div><button class="btn btn-default btn-block" id="stop">Pause</button></div>

    <div><button class="btn btn-default btn-block" id="moveCard">Move Card</button></div>
  </div>
  <div class="column middle" style="background-color:#bbb;">

    <div class='cards middle' id="cards">
      <!--<div class='cardGreen'></div>-->

    </div>
    <div id="myProgress">

      <div id="myBar"></div>
    </div>
  </div>
  <div class="column right" style="background-color:#ccc;">

    <h2>Tutorial</h2>
    <p>Will be here soon :)</p>
  </div>
</div>

编辑:

为了让第一辆车出现在中间，让父级的宽度为0%，并在每次添加卡片时让它增长，直到达到100%，并且添加 margin:auto

var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;



var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var lastCard;
var width;
var id;



function sortCards() {
  var cards = document.getElementsByClassName("card"),
    cw = parentEl.clientWidth,
    sw = parentEl.scrollWidth,
    diff = sw - cw,
    offset = diff / (cards.length - 1);

  for (var i = 0; i < cards.length; i++) {
    i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
  }
}

//Move card
document.getElementById("moveCard").addEventListener("click", function() {
  myMove();
});


//Start the game
document.getElementById("play").addEventListener("click", function() {
  move();
});

//Stop the game
document.getElementById("stop").addEventListener("click", function() {
  stop();
});

function move() {
  width = 1;
  id = setInterval(frame, 5);

  function frame() {
    if (width >= 100) {
      elem.style.width = 1 + '%';
      clearInterval(id);
      addCard();
      move();
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}


function myMove() {

  var elem = lastCard;
  lastCard = lastCard.previousSibling;

  var pos = 0;
  var id = setInterval(movie, 5);

  function movie() {
    if (pos == 350) {
      clearInterval(id);
      elem.remove();
    } else {
      pos = pos + 5;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }


}
var i = 1;

function addCard() {
  var div = document.createElement("div");

  div.style.left = "auto";


  div.innerHTML = i++;
  div.style.position = "relative";
  div.style.color = "green";

  div.classList.add("card");
  if (parseInt(parentEl.style.width) < 100)
    parentEl.style.width = (parseInt(parentEl.style.width) + 10) + '%';

  parentEl.prepend(div);
  lastCard = div;
  sortCards();
}


function stop() {
  elem.style.width = 1 + '%';
  clearInterval(id);
}

sortCards();
.cards {
  display: flex;
  max-width: 300px;
}

.card {
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
  flex: 0 0 50px;
  background: red;
  transition: transform .25s;
}

.cardGreen {
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
  flex: 0 0 50px;
  background: green;
  transition: transform .25s;
}

#myProgress {
  position: relative;
  width: 100%;
  height: 10px;
  background-color: grey;
}

#myBar {
  position: absolute;
  width: 1%;
  height: 100%;
  background-color: green;
}


/* Create three unequal columns that floats next to each other */

.column {
  float: left;
  /*padding: 10px;*/
  height: 300px;
  /* Should be removed. Only for demonstration */
}

.left,
.right {
  width: 20%;
}

#cards {
  width: 15%;
  margin: auto;
}

.middle {
  width: 60%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <h1>Simple game</h1>
</header>

<div class="row">
  <div class="column left" style="background-color:#aaa;">
    <div><button class="btn btn-default btn-block" id="play">Start Game</button></div>
    <div><button class="btn btn-default btn-block" id="stop">Pause</button></div>

    <div><button class="btn btn-default btn-block" id="moveCard">Move Card</button></div>
  </div>
  <div class="column middle" style="background-color:#bbb;">

    <div class='cards middle' id="cards" style="width:0%">
      <!--<div class='cardGreen'></div>-->

    </div>
    <div id="myProgress">

      <div id="myBar"></div>
    </div>
  </div>
  <div class="column right" style="background-color:#ccc;">

    <h2>Tutorial</h2>
    <p>Will be here soon :)</p>
  </div>
</div>

关于Javascript从左侧动态添加div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49722162/

上一篇：javascript - 对象神秘更新而没有调用更新函数

下一篇：javascript - 向每个列表项 (LI) 添加括号中的后代计数。跳过那些里面没有其他列表项的 LI

相关文章：

javascript - 如何在 AJAX foreach JSON 返回调用中引入延迟和淡入

javascript - jQuery Validate Remote - 检查电子邮件是否已经存在

http - jQuery.ajax 在响应结束之前获取服务器刷新的数据的开始

javascript - 可以获取iframe的url跨域吗？

php - 在 HTML 中显示未解析的 PHP

javascript - 在 Jquery 中遍历表头

javascript - 在pushState上获取路径特定的cookie

asp.net - 使用 jquery ajax 的 Web api - 无法加载资源 : the server responded with a status of 404 (Not Found)

javascript - (bxslider) 使用带有文字而不是圆圈的 slider 寻呼机

html - bootstrap 标签和输入大小 : two lines under sm size, 一行超过 sm 大小，一个固定宽度

©2024 IT工具网  联系我们