0

我正在使用以下编码

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

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

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

我正在向此链接添加小提琴

4

1 回答 1

2

给你：

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

您可以根据需要修改缩放级别。

我稍微修改了小提琴，因为您只需将 javascript 添加到左下角区域。

于 2012-11-20T12:21:22.030 回答