javascript - 想讓圖片上那個塊，在增加塊的寬度的時候向右邊移動，而不是向左邊移動。需要怎麼解決？

Question

雷雷

##

Answer 1

由於，HTML內座標係是由左往右是X軸，從上到下是Y軸。你的第三邊，其實是從紅點開始延長的一個長方形：

由於，第三邊是從正方形p3延長而來，而由於你增加了正方形的寬度，又因為屏幕從左向右為X軸正方向，所以寬度增加正方形會向右延長成長方形。而如果你要讓這個變長的效果「看起來」是在向左移動，那麼就要在每一次變長的同時，將紅點向左移動相同的距離。

所以，對於p3的操作應該是這樣寫：

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";
}

效果圖：

Answer 2

由於，HTML內座標係是由左往右是X軸，從上到下是Y軸。你的第三邊，其實是從紅點開始延長的一個長方形：

由於，第三邊是從正方形p3延長而來，而由於你增加了正方形的寬度，又因為屏幕從左向右為X軸正方向，所以寬度增加正方形會向右延長成長方形。而如果你要讓這個變長的效果「看起來」是在向左移動，那麼就要在每一次變長的同時，將紅點向左移動相同的距離。

所以，對於p3的操作應該這樣寫：

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";

}
效果圖：