使用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移動連續的列

回答

相關問題