-1

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

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>

脚本

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 ，它可能有助于找出我的错误。

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

更新

缩放问题已更改。但是现在鼠标滚轮也在这里完成，但问题是我们无法为鼠标滚轮提供最大值。 更新的垃圾箱

4

3 回答 3

2 
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斌链接

于 2012-12-27T07:07:30.960 回答
1

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

所以试试这个：

http://jsbin.com/itekek/4

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

编辑：

http://jsbin.com/itekek/46

添加了鼠标滚轮支持。

于 2012-12-27T07:21:45.010 回答
1

看到这个：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;
}

见样品

于 2012-12-27T07:26:32.610 回答