recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Je souhaite que le bloc sur l'image se déplace vers la droite plutôt que vers la gauche lorsque la largeur du bloc est augmentée. Ce qui doit être fait?

<!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 Il y a quelques jours800

répondre à tous(2)je répondrai

  • 滿天的星座

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

    Parce que le système de coordonnées en HTML est l'axe X de gauche à droite et l'axe Y de haut en bas. Votre troisième côté est en fait un rectangle s'étendant à partir du point rouge :

    Parce que le troisième côté s'étend du carré p3, et parce que vous augmentez la largeur du carré, et parce que l'écran est dans la direction positive de l'axe X de gauche à droite, le carré avec une largeur accrue s'étendra jusqu'au directement dans un rectangle. Et si vous souhaitez que l'effet d'allongement « semble » se déplacer vers la gauche, vous devez alors déplacer le point rouge de la même distance vers la gauche à chaque fois qu'il s'allonge.

    Donc, l'opération de p3 devrait s'écrire ainsi : 

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

    Rendu :

    répondre
    0
  • 代言

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

    Parce que le système de coordonnées en HTML est l'axe X de gauche à droite et l'axe Y de haut en bas. Votre troisième côté est en fait un rectangle s'étendant à partir du point rouge :

    Parce que le troisième côté s'étend du carré p3, et parce que vous augmentez la largeur du carré, et parce que l'écran est dans la direction positive de l'axe X de gauche à droite, le carré avec une largeur accrue s'étendra vers la droite. dans un rectangle. Et si vous souhaitez que l'effet d'allongement « semble » se déplacer vers la gauche, vous devez alors déplacer le point rouge de la même distance vers la gauche à chaque fois qu'il s'allonge.

    Donc, l'opération de p3 devrait s'écrire ainsi :

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

    }
    Rendu :

    répondre
    0
  • Annulerrépondre