Question

我正在使用以下编码

<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>

用于制作简单的放大和缩小功能。

我觉得这个图像很难无限缩放。我想固定一个位置来放大和缩小。放大和缩小时图像不得超过该位置。

我正在为这个link

添加一个小提琴

Answer 1

Here you go：

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";
}

您可以将缩放级别修改为您想要的任何内容。

我稍微修改了the fiddle，因为你只需要在左下角区域添加javascript。

修复放大和缩小编码

1 个答案: