Question

我正在努力创建一个div，当它遇到一个墙时会反弹，并在点击它时自行克隆。我提出了以下代码。它工作得很好，但经过多次点击后，会形成很多div，当其中一个div遇到一堵墙时，所有的div都会弹跳。请帮助我解决这个问题。

Bouncing Div

<style>
div.bound {
    display:block;
    margin: 0 auto;
    border-style:solid;
    width:462px;
    height:302px;
    border-width:1px
}
div.move {
    position:absolute;
    height:50px;
    width: 50px;
    background: red;
    border-radius: 5px;
}
</style>

<script language="javascript">
var x = 5; //Starting x coord.
var y = 5; //Starting y coord.
var max_x = window.innerWidth; //maximum x coord.
var max_y = window.innerHeight; //maximum y coord.
var xoffset = 10; //Move 10px every step
var yoffset = 10; //Move 10px every step
var TimeID;

function duplicate() {
    var myDiv = document.getElementById("myDiv");

    var divClone = myDiv.cloneNode(true);

    document.body.appendChild(divClone);
}

function moveLogo() {
    x = x + xoffset;
    y = y + yoffset;


    var yarray = document.getElementsByClassName("move");
    for (var i = 0; i < yarray.length; i++) {

        yarray[i].style.top = y - (i * 50) + 'px';
        if ((y - (i * 50) + yoffset > max_y - 25) || (y - (i * 50) + yoffset < 0)) yoffset *= -1;

    }
    var xarray = document.getElementsByClassName("move");
    for (var j = 0; j < xarray.length; j++) {

        xarray[j].style.left = x - (j * 50) + 'px';
        if ((x - (j * 50) + xoffset > max_x - 25) || (x - (j * 50) + xoffset < 0)) xoffset *= -1;
    }


    TimeID = window.setTimeout('moveLogo()', 100);


}
</script>

<div id="myDiv" class="move" onclick="duplicate()">
</div>

Answer 1

您对所有元素仅使用一组xoffset和yoffset个变量。每个元素都需要一组，因此每个元素都有自己的方向。

例如，您可以使用数组，以便每个元素在每个数组中都有一个项目。

（另外，您可以使用数组来保留对元素的引用，这样您就不必一遍又一遍地使用getElementByClassName。）

如何创建一个行为与其克隆完全相同但不受其上事件影响的div？

1 个答案: