Comment agrandir et réduire l'image en utilisant jquery?

Question

Je code suivant

<div class="c1"> 
    <div class="d1"> 
     <img /> 
     <img /> 
     <img /> 
    </div> 
</div> 

1.There sont des images GIF inclus dans la balise. Ces images sont transparentes et certaines d'entre elles sont mises en évidence avec un patch jaune transparent. 2. La classe css est appliquée à la classe div interne et il y a une image de fond de type jpeg est assignée à la classe div interne à l'aide de la classe css. 3. Le div extérieur est rendu défilable à l'aide de la classe css qui lui est appliquée.

Je veux faire un zoom avant et arrière sur l'image image dans div avec l'aide de jquery.

est-il possible de zoomer et dézoomer l'image à l'aide de jquery? quel est le code simple pour cela?

en attente de vos réponses amis!

Merci!

Answer 1

Les arrière-plans ne peuvent pas être mis à l'échelle, seuls les tags <img> le peuvent.

Vous pouvez mettre une image dans un div, où div a overflow:hidden;, puis mettre à l'échelle l'image.

Vous pouvez voir un exemple rapide ici: http://jsbin.com/ozugi3/2

http://jsbin.com/ozugi3/2/edit

Answer 2

L'image Kabbar peut régler Zoomer votre question: http://www.ideabonus.com/Kabbar/index.html

Answer 3

****here is the script**** 
     <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#Img1, #Img2, #Img3').mouseover(function() { 
       $(this).animate({ width: "122px", height: "110px" }, 100); 
      }); 
      $('#Img1, #Img2, #Img3').mouseout(function() { 
       $(this).animate({ width: "118px", height: "106px" }, 100); 
      }); 
     }); 
     </script> 
**Aspx code** 
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0"> 
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0"> 
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0"> 

Answer 4

Essayez cette link zoom .Image fonctionne plutôt bien avec ce code.