Question

我将网页划分为 3列，如下所示。并使用div中的图片填充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从左到右移动第一个列（带有图像）。

我该怎么做？

Answer 1

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

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

fiddle1

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

fiddle2

Answer 2

也许你不想这样做，但一种选择是使用flex和order来做到这一点。

CSS：

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

JS

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，其余部分就可以自行处理。我不确定你是否想用计时器，按钮等来做这件事，但无论它是什么，你只需要确保你想要的元素在左边{{1} }小于中心，小于你想要的那个中心。

Answer 3

试试这个（需要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

使用Javascript连续移动列

3 个答案: