1

私は単純な Web ページを JavaScript で作成しました。これは、クリック後に時間の経過とともにページの中心から要素をスケーリングしようとします。テストした svg 要素では問題なく動作します。

しかし、画像を使用すると、div (中央にある) の外側から始まり、大きくなるにつれてゆっくりと収束し、その後、本来あるべきように中央に配置されます。私が見つけることができる唯一の結果は、オーバーフロー設定に関連していますが、オーバーフローが非表示に設定されていても、画像はまだ div の外にあり、表示されています。div は最初にサイズ変更されるため、常に画像に対して十分な大きさです。

使用しているサイズの値が小さいためでしょうか、それとも私のコードに問題があるのでしょうか?

<!DOCTYPE html>
<html>
  <head>    
    <style>
    body {
     margin:0;
    }
    #maindiv {
     position:absolute;
     background-color:#141414;
     width:100%;
     height:100%;
     overflow: hidden;
    }
    #face {
    width:109px;
    /* height: auto !important;  */
    }
    #facediv { 
     position: absolute; 
     top: 50%; 
     left: 50%;
     }
    </style>

    <script>

    function sizeUpdate (elem){
        var sf = 1

        function frame(){

            sf++                                                                <!-- increment scale factor
            var fwidth = 0.1;
            var scaledwidthface = (fwidth * sf);                                <!-- scaled width - width-constant*scale-factor
            var face_var =document.getElementById("face");
            var facediv_var = document.getElementById("facediv");
            facediv_var.style.width = ""+scaledwidthface+"px";                  <!-- set containing div to same width as object
            facediv_var.style.marginLeft = ""+(-1 * scaledwidthface/2 )+"px";   <!-- set the container div to x-offset half object-width (centres horizontally)
            face_var.style.width = ""+scaledwidthface+"px";                     <!-- set width of object
            var face_ht = face_var.clientHeight;                                <!-- get integer-form of object height (?)
            facediv_var.style.height = ""+face_ht+"px";                         <!-- set container div to same height as object
            facediv_var.style.marginTop = ""+(-1*face_ht/2)+"px";               <!--set container div y-offset half object-height (centres vertically)

            if (sf == 500)
                clearInterval(id)                                               <!--stop when incr reaches this maximum
        }

        var id = setInterval(frame, 50)

    }
    </script>
 </head>


    <body>
        <div id="maindiv" onclick="sizeUpdate(this.children[0])">
            <div id="facediv">
                <img id="face" src="http://goo.gl/6xLiC">
            </div>
        </div>
    </body>
</html>
4

1 に答える 1