使用Javascript移动连续的列

我已将网页分成3列，如下所示。并填写div与javascript中的图像。使用Javascript移动连续的列

<div id="fullPage" class="image-motion-wrapper"> 
    <div class="row"> 
     <div class="col-md-4" align="left" id="left"> 
     </div> 
     <div class="col-md-4" align="center" id="center"> 
     </div> 
     <div class="col-md-4" align="right" id="right">  
     </div> 
    </div> 
</div>

现在我需要移动第一柱（与它的图像）使用Javascript从左到右。

我该怎么做？

来源

2017-02-14 Nim

你使用bootstrap吗？ – Banzay

这是否只发生过一次？你是否试图在计时器上做到这一点？它只移动一列吗？它是动画还是捕捉？ – haxxxton

'document.querySelector（“。row div：first-child”）。className + =“col-md-offset-8”'或'document.getElementById（“left”）。className + =“col-md-offset -8“' – Banzay

试试这个（需要的jQuery）：

var $cols = $('#fullPage .row:first-child > div').clone(); 
var $row = $('#fullPage .row:first-child').empty(); 

$row.append($cols[1]); // Put 2nd column first 
$row.append($cols[0]); // Put 1st column next 
$row.append($cols[2]); // Last column stays in the same place

来源

2017-02-14 06:17:45 ablopez

你应该试试这个自己。我为你创作了一个小提琴。一个非常简单的。试一试，这将有助于理解这个概念。

$("#left").insertAfter($("#right"));

fiddle1

$("#left").insertAfter($("#right")); 
$("#center").insertAfter($("#right"));

fiddle2

来源

2017-02-14 06:20:12

也许你并不想这样做，而是一种选择是使用Flex和为了做到这一点。

CSS：

.row { 
    display: flex; 
    flex-direction: row; 
} 
.row div { 
    order: attr(data-order); 
}

function changeOrder() { 
    document.getElementById('left').setAttribute('data-order', '4'); 
}

HTML

<div id="fullPage" class="image-motion-wrapper"> 
      <div class="row"> 
       <div class="col-md-4" data-order="1" id="left"> 
       </div> 
       <div class="col-md-4" data-order="1" id="center"> 
       </div> 
       <div class="col-md-4" data-order="2" id="right">  
       </div> 
      </div> 
     </div>

这不会与一些较旧的浏览器，但我喜欢它是多么容易被操纵，给予你只需要改变data-order，其余的都会自行处理。我不确定你是否想用计时器，按钮等来做到这一点，但不管它是什么，你只需要确保你想要在左边的data-order上的元素小于中心点，这是少的而不是你想要的那个。

来源

2017-02-14 06:20:34 dunnmifflsys

使用Javascript移动连续的列

回答

相关问题