search

Home  >  Q&A  >  body text

javascript - I want the block on the image to move to the right instead of to the left when increasing the width of the block. What needs to be done?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <mata http-equiv=”content-type” content=”text/html; charset=gb2312” />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <p id="p1" style="width:30px; height:30px;background:#808080; "></p>
    <p id="p2" style="width:30px; height:30px;background:#808080; margin-left:170px; "></p>
    <p id="p3" style="width:30px; height:30px;background:#808080; position:absolute;left:140px;top:200px;padding-left:0;"></p>
    <p id="p4" style="width:30px; height:30px;background:#808080; position:absolute;top:170px"></p>
</body>
</html>
<script type="text/javascript">
    setInterval(change, 5);
    function change() {
        var p1 = document.getElementById('p1');
        var p2 = document.getElementById('p2');
        var p3 = document.getElementById('p3');
        var p4 = document.getElementById('p4');
        var x = parseInt(p1.style.width);
        console.log(x);

        if (x<200) {
            x++;
        }
        p1.style.width = x + "px";

        if (x =="200") {
           var y = parseInt(p2.style.height);

           if (y<200) {
               y++;
           }
           p2.style.height = y + "px";
       }

       if (y == "200") {
           var z = parseInt(p3.style.width);

           if (z < 200) {
               z++;
           }
           p3.style.width = z + "px";
        }
    }
</script>

滿天的星座滿天的星座2794 days ago802

reply all(2)I'll reply

  • 滿天的星座

    滿天的星座2017-07-05 10:41:20

    Because the coordinate system in HTML is the X-axis from left to right, and the Y-axis from top to bottom. Your third side is actually a rectangle extending from the red point:

    Because the third side is extended from the square p3, and because you increase the width of the square, and because the screen is in the positive direction of the X-axis from left to right, the square with increased width will extend to the right into a rectangle. And if you want the lengthening effect to "appear" to be moving to the left, then you need to move the red point the same distance to the left each time it lengthens.

    So, the operation of p3 should be written like this: 

    if (y == "200") {
    var z = parseInt(p3.style.width);

    if (z < 200) {
        z++;
    }
    p3.style.marginLeft = (-z + 30) + 'px';
    // 加上上面一句，至于为什么是-z + 30
    // 其实是-(z - 30)
    // 因为，原本方块的宽度就是30，
    // 那么，在X轴正方向（宽度增量就是z - 30）
    // 由于宽度向右伸长了z - 30
    // 所以将左边距设置为-(z - 30)，来抵消这个向右伸长的增量
    // 所以，看起来就是在向左移动
    // 实际上是伸长以后将整个图形同时向左移相应的距离
    // 而并非是实际向左伸长
    p3.style.width = z + "px";
}

    Rendering:

    reply
    0
  • 代言

    代言2017-07-05 10:41:20

    Because the coordinate system in HTML is the X-axis from left to right, and the Y-axis from top to bottom. Your third side is actually a rectangle extending from the red point:

    Because the third side is extended from square p3, and because you increase the width of the square, and because the screen is in the positive direction of the X-axis from left to right, the square with increased width will extend to the right into a rectangle. And if you want the lengthening effect to "appear" to be moving to the left, then you need to move the red point the same distance to the left each time it lengthens.

    So, the operation of p3 should be written like this:

    if (y == "200") {

    var z = parseInt(p3.style.width);

if (z < 200) {
    z++;
}
p3.style.marginLeft = (-z + 30) + 'px';
// 加上上面一句，至于为什么是-z + 30
// 其实是-(z - 30)
// 因为，原本方块的宽度就是30，
// 那么，在X轴正方向（宽度增量就是z - 30）
// 由于宽度向右伸长了z - 30
// 所以将左边距设置为-(z - 30)，来抵消这个向右伸长的增量
// 所以，看起来就是在向左移动
// 实际上是伸长以后将整个图形同时向左移相应的距离
// 而并非是实际向左伸长
p3.style.width = z + "px";

    }
    Rendering:

    reply
    0
  • Cancelreply