I want to keep the image attached when I zoom in or out.

I want to make the spacing between the images the same when zooming in and out of the images connected vertically and horizontally, but it doesn't work.

I was able to write a program to zoom in and out the images, but when zooming in and out, the spacing between the images is too far apart and it overlaps.In order to solve the interval problem, I made it by trial and error, but the screen freezes and I am having a hard time.

Could someone please help me?Thank you for your cooperation.

This is the source part where you are trying to zoom in and out the image.
There are six images, three horizontally and two vertically.

This is how to place the image (□)

□□□
□□□

Also, I'm trying to move the image by selecting it one by one.

<body>
         <ons-gesture-detector>
             <divid="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>

var IMGROWNUM=3; // The number next to img (three is connected horizontally in a row)

         Obtaining the //img Number
         varimgTest= document.getElementById("imgAll";
         var tags = imgTest.getElementsByTagName("img");
         varimgLen=tags.length;

         // The process of updating the position of an image after detecting a pinch-in/pinch-out
         for(vari=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+')};
             }; 
         };

I'm very sorry, but I appreciate your cooperation.

javascript monaca

2022-09-30 17:34

1 Answers

I was able to zoom in and out using the method mjy told me, thank you.

I'm not sure why, but when I try to change it in bulk by specifying the parent element,
The image (□) is

□□□
□□□
↓
□
□
□
□
□
□
As shown in , the size was not changed and it became like a vertical line.
I've changed various sizes, but they line up vertically.
So when I tried to change the width with one child element at a time, I wanted to do it.

for(vari=0;i<imgLen;i++){ 
    var str = '0000' + i;
    str = str.substring (str.length-4, str.length);
    target = 'img' + str;

    variableTest= document.getElementById(target);
    imgTest.style.width="71px";
    imgTest.style.height="71px";    
};

2022-09-30 17:34

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656