javascript - Saya mahu blok pada imej bergerak ke kanan dan bukannya ke kiri apabila meningkatkan lebar blok. Apa yang perlu dilakukan?

Question

{kod...}

滿天的星座 · Answer

Sebab sistem koordinat dalam HTML ialah paksi X dari kiri ke kanan, dan paksi Y dari atas ke bawah. Sisi ketiga anda sebenarnya ialah segi empat tepat yang memanjang dari titik merah:

Oleh kerana sisi ketiga dilanjutkan dari segi empat sama p3, dan kerana anda menambah lebar segi empat sama, dan kerana skrin berada dalam arah positif paksi-X dari kiri ke kanan, segi empat sama dengan lebar meningkat akan memanjang ke tepat ke dalam segi empat tepat. Dan jika anda mahu kesan pemanjangan "nampak" bergerak ke kiri, maka anda perlu mengalihkan titik merah pada jarak yang sama ke kiri setiap kali ia memanjang.

Jadi, operasi p3 hendaklah ditulis seperti ini:

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:

代言 · Answer

Sebab sistem koordinat dalam HTML ialah paksi X dari kiri ke kanan, dan paksi Y dari atas ke bawah. Sisi ketiga anda sebenarnya ialah segi empat tepat yang memanjang dari titik merah:

Oleh kerana sisi ketiga dilanjutkan dari segi empat sama p3, dan kerana anda menambah lebar segi empat sama, dan kerana skrin berada dalam arah positif paksi-X dari kiri ke kanan, segi empat sama dengan lebar meningkat akan memanjang ke kanan menjadi segi empat tepat. Dan jika anda mahu kesan pemanjangan "nampak" bergerak ke kiri, maka anda perlu mengalihkan titik merah pada jarak yang sama ke kiri setiap kali ia memanjang.

Jadi, operasi p3 hendaklah ditulis seperti ini:

jika (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: