Question

嗨我试图让div元素自动来回移动但是我卡住了我不知道我需要添加什么来让它工作。我甚至无法让它移动

我的命名空间：

var $hubbe = {};

我的移动功能：

$hubbe.movex = 0;

$hubbe.newdiv = document.getElementById("newdiv");

$hubbe.move = function() {
    $hubbe.movex++
    $hubbe.newdiv.style.left = $hubbe.movex + 'px';
    setTimeout($hubbe.move, 2000);
}

和div：

$hubbe.printelement = function() {
$hubbe.div = document.createElement("DIV");
$hubbe.div.setAttribute("id", "newdiv");
$hubbe.div.setAttribute("onload", "$hubbe.move()")
$hubbe.div.innerHTML = "hej";
$hubbe.div.style.position = "absolute";
$hubbe.div.style.left = "50%";
$hubbe.div.style.top = "50%";
document.body.appendChild($hubbe.div);
}

编辑：我的jsfiddle：https://jsfiddle.net/g7ytvevp/

Answer 1

请查看以下内容： https://jsfiddle.net/g7ytvevp/1/

<script> var $hubbe = {};

    $hubbe.printelement = function() {
        //skapar en varibale $hubbe.div som ett div element
        $hubbe.div = document.createElement("DIV");
        // sätter ett id newdiv på $hubbe.div
        $hubbe.div.setAttribute("id", "newdiv");
        $hubbe.div.setAttribute("style", "background-color:red;")
        $hubbe.div.innerHTML = "hej";
        $hubbe.div.style.position = "absolute";
        $hubbe.div.style.left = "50%";
        $hubbe.div.style.top = "50%";
        //skriver ut $hubbe.div till body
        document.body.appendChild($hubbe.div);
        $hubbe.move();
    }

    $hubbe.movex = 0;
    $hubbe.newdiv = document.getElementById("newdiv");
    $hubbe.move = function() {
            $hubbe.movex++
                $hubbe.div.style.left = $hubbe.movex + 'px';
                setTimeout($hubbe.move, 2000);
    }
</script>`

你＆＃34;移动＆＃34;函数没有被调用，因为＆＃34; onload＆＃34;事件并没有因为那个div被解雇。这篇文章中提到了这个原因： How to add onload event to a div element?

更新：

带有描述性评论的动画的最终版本。 https://jsfiddle.net/g7ytvevp/9/

    var $hubbe = {};

    $hubbe.printelement = function() {

        $hubbe.div = document.createElement("DIV");

        $hubbe.div.setAttribute("id", "newdiv");
        $hubbe.div.setAttribute("style", "background-color:red;")
        $hubbe.div.innerHTML = "hej";
        $hubbe.div.style.position = "absolute";
        $hubbe.div.style.left = "50%";
        $hubbe.div.style.top = "50%";

        document.body.appendChild($hubbe.div);
        $hubbe.move();
    }

    $hubbe.movex = 0;
    $hubbe.newdiv = document.getElementById("newdiv");
    $hubbe.translateX = 1;
    $hubbe.translateY = 0;
            $hubbe.move = function() {
                    var element = $hubbe.div;
            var translateX = $hubbe.translateX;
            var translateY = $hubbe.translateY;
            // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
            // This method basically gives us the position of all four sides of the "element" on which it is call. It gives us the size as well.
            // In the current case we only require the 'current position' 
            // of our div so we call it over our div and the resultant
            // variable 'pos' would contain the  respective position of 
            // each side left / right / top / bottom in it e.g pos.left etc.
            // This is needed because we need to keep track of where our div
            // currently is, since the translation is based on certain 
            // conditions e.g if the div reaches the right edge off the 
            // screen, it should start moving left etc.
                    var pos = element.getBoundingClientRect();
            // We're using the same method to find the dimesions of our 
            // parent container i.e "body" element, since we need to keep
            // track of the condition when our div reaches the edge of the 
            // screen and that we can only know if we know the co-ordinates
            // of the edge.
                    var domRect = document.body.getBoundingClientRect();

            if(pos.right >= domRect.right)
                $hubbe.translateX = -1;

            if(pos.left <= domRect.left)
                $hubbe.translateX = 1;
            // This is the line that basically makes the translation along
            // X - axis happen. pos.left variable contains the position
            // (in pixels) of the left edge of the div object. We add the
            // translation factor "translateX" (1 in this case) to it and 
            // update the position of the div, causing it to move to the left
            // or the right. In case of a positive (+1, +2 ... ) it will move
            // to the right, for negative, it will go left and for 0, it will
            // not move along X - axis. The higher the translation factor, 
            // the faster the object would translate.
                $hubbe.div.style.left = pos.left + translateX + 'px';
            // This can be used for vertical translation / movement along the 
            // Y - axis. It was just for demonstration purposes. For now
            // it isn't event being used. 
            $hubbe.div.style.top = pos.top + translateY + 'px';
                setTimeout($hubbe.move, 10);
    }


</script>

使用javascript来回移动div /动画

1 个答案: