

連続で縦と横にいくつか繋がっている画像の拡大・縮小時に画像同士の間隔を同じにしたいのですがうまくいきません。

ピンチイン・ピンチアウトにて画像を拡大、縮小するプログラムは書けたのですが、拡大・縮小時に画像同士の間隔が離れたりくっつきすぎて重なってしまいます。間隔の問題を解消するために自分なりに試行錯誤して作成したのですが、画面がフリーズしてしまい困っています。

どなたかご助力頂けないでしょうか。よろしくお願い致します。

# ソース

ピンチイン・ピンチアウトにて画像を拡大、縮小させようとしているソース部分です。  
画像は横に３つ、縦に２列の計６つです。

画像(□)の置き方はこのようになっています

[code]

    □□□
    □□□
    
[/code]

又、画像はひとつひとつ選択して動かそうとしています。

## HTML部分

[code]

        <body>
             <ons-gesture-detector>
                 <div id="imgAll">
                     <p>
                         <img src="img/test.png" class="img0000"/>        
                         <img src="img/test.png" class="img0001"/>        
                         <img src="img/test.png" class="img0002"/>        
                     </p>
                     <p>
                         <img src="img/test.png" class="img0003"/>        
                         <img src="img/test.png" class="img0004"/>        
                         <img src="img/test.png" class="img0005"/>        
                     </p>
                 </div>
             </ons-gesture-detector>
    
         </body>
    
[/code]

## JavaScript部分です。

[code]

             var IMGROWNUM = 3; //imgの横の数(3なら横に3個連続で繋がります)
    
             //imgの数の取得
             var imgTest = document.getElementById("imgAll");
             var tags = imgTest.getElementsByTagName("img");
             var imgLen = tags.length;
    
             //ピンチイン・ピンチアウトを検知した後の、画像の位置を更新する処理
             for(var i = 0; i < imgLen; i++){ 
                 var str = '0000' + i;
                 str = str.substring(str.length - 4, str.length);
                 target = $('.img' + str);
                 if(i = 0){
                    target.css({transform : 'translate(scale(' + scale + ',' + scale +')'});
                 }else{
                    target.css({transform : 'translate('+ (142 * (scale - 1) * (i % IMGROWNUM)) + 'px, '+ (142 * (scale - 1)* (Math.floor(i /
         IMGROWNUM))) + 'px) scale(' + scale + ',' + scale +')'});
                 }; 
             };
    
[/code]

* * *

大変申し訳ありませんが、何卒よろしくお願い致します。


CC BY-SA 3.0
2016-10-18T17:24:31.177
29678
2016-10-19T14:21:19.943
2016-10-19T07:45:59.523
76
19175
question
javascript monaca
画像の拡大・縮小時に画像をくっつけたままにしたい


mjyさんに教えて頂いた方法で拡大・縮小することが出来ました、ありがとうございます。

理由がよく分からないのですが、親要素を指定して一括で変更しようとすると  
画像(□)が

□□□  
□□□  
↓  
□  
□  
□  
□  
□  
□  
のようにサイズが変更されずに縦に１列繋がったような状態になってしまいました。  
色々サイズを変更してみましたが縦に１列並んでしまいます。  
そこで子要素を１つずつ指定してwidthで変更する方法を試したところ行いたい動きになりました。

[code]

    for(var i = 0; i < imgLen; i++){ 
        var str = '0000' + i;
        str = str.substring(str.length - 4, str.length);
        target = 'img' + str;
    
        var imgTest = document.getElementById(target);
        imgTest.style.width="71px";
        imgTest.style.height="71px";    
    };
    
[/code]


CC BY-SA 3.0
2016-10-19T14:09:14.320
29711
2016-10-19T14:21:19.943
2016-10-19T14:21:19.943
19175
19175
29678
answer