javascript - 使用javascript来回移动div/动画

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>`

您的“移动”函数没有被调用，因为没有为那个 div 触发“onload”事件。原因在这篇文章中提到: 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>