Correction d'un zoom dans et hors de codage

Je suis en utilisant le codage de 

<html>
 <head>
  <style>
     #thediv {
     margin:0 auto;
     height:400px;
     width:400px;
     overflow:hidden;
   }
   img {
     position: relative;
     left: 50%;
     top: 50%;
   }
  </style>
 </head>
 <body>
  <input type="button" value ="-" onclick="zoom(0.9)"/>
  <input type="button" value ="+" onclick="zoom(1.1)"/>
  <div id="thediv">
    <img id="pic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/>
  </div>

 <script>
  window.onload = function(){
    zoom(1)
  }
  function zoom(zm) {
    img=document.getElementById("pic")
    wid=img.width
    ht=img.height
    img.style.width=(wid*zm)+"px"
    img.style.height=(ht*zm)+"px"
    img.style.marginLeft = -(img.width/2) + "px";
    img.style.marginTop = -(img.height/2) + "px";
  }
  </script>
 </body>
</html>

Pour faire un simple zoom in et zoom-out de fonction.

J'ai cela, j'ai une difficulté de l'image est le zoom indéfiniment. je tiens à corriger une position de zoom avant et de zoom arrière. L'image ne doit pas dépasser cette position pendant un zoom avant et zoom arrière.

Je suis l'ajout d'un violon à ce lien

InformationsquelleAutor Vivek Dragon | 2012-11-20
  1. 2

    Ici, vous allez:

    var zoomLevel = 100;
var maxZoomLevel = 105;
var minZoomLevel = 95;

function zoom(zm) {
    var img=document.getElementById("pic");
    if(zm > 1){
        if(zoomLevel < maxZoomLevel){
            zoomLevel++;
        }else{
            return;
        }
    }else if(zm < 1){
        if(zoomLevel > minZoomLevel){
            zoomLevel--;
        }else{
            return;
        }
    }
    wid = img.width;
    ht = img.height;
    img.style.width = (wid*zm)+"px";
    img.style.height = (ht*zm)+"px";
    img.style.marginLeft = -(img.width/2) + "px";
    img.style.marginTop = -(img.height/2) + "px";
}​

    Vous pouvez modifier le niveau de zoom à tout ce que vous voulez.

    J'ai modifié le violon un peu, car vous avez seulement besoin d'ajouter du javascript à la zone inférieure gauche.

    InformationsquelleAutor Cerbrus