cari

Rumah  >  Soal Jawab  >  teks badan

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

<!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 hari yang lalu803

membalas semua(2)saya akan balas

  • 滿天的星座

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

    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:

    balas
    0
  • 代言

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

    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:

    balas
    0
  • Batalbalas