Question

在这里，我尝试在按钮点击时进行简单的放大和缩小功能。

HTML

 <input type="button" value ="-" onClick="zoom(0.9)"/>
 <input type="button" value ="+" onClick="zoom(1.1)"/>
 <div id="thediv">

 <img id="pic" src="http://cdn1.iconfinder.com/data/icons/VistaICO_Toolbar-Icons/256/Zoom-in.png"/>
 </div>

SCRIPT

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

但问题是，每当我点击放大功能时，图像就会移动到页面的顶角。我试图解决这个问题，但没有解决办法有效。

以下是我正在处理的BIN，可能有助于找到我的错误。

还有另一个问题：有没有办法将鼠标滚轮应用于此功能？

更新

变焦问题已经改变。但是现在鼠标轮也在这里完成，但问题是我们无法给出鼠标滚轮的最大值。 UPDATED BIN

Answer 1

img.style.marginLeft = -(img.width/2) + "px"; // you have negation sign here
img.style.marginTop = -(img.height/2) + "px"; // you have negation sign here

将其更改为：

img.style.marginLeft = (img.width/2) + "px";
img.style.marginTop = (img.height/2) + "px";

JS BIN LINK

Answer 2

根据您的marginLeft和marginTop计算，我猜您想要在保留中心点的同时放大和缩小图像。

所以试试这个：

http://jsbin.com/itekek/4

保留初始宽度和高度值，并略微修改缩放限制值。

修改：

http://jsbin.com/itekek/46

添加了鼠标滚轮支持。

Answer 3

请参阅：http://jsbin.com/itekek/14/edit

你在这里有未经剥离的变焦加鼠标轮..

更新：要按类名获取元素，请使用以下函数：

function findElementByClass(matchClass) {
 var elems = document.getElementsByTagName('*'),i;
 for (i in elems) {
    if ((" " + elems[i].className + " ").indexOf(" " + matchClass + " ") > -1) {
        return elems[i];
    }
   }
  return null;
}

请参阅sample

放大时更改位置

3 个答案: