在放大时改变位置

Position change while zoom in

本文关键字：位置 改变 放大      更新时间：2023-09-26

这里我试着在按钮点击时做一个简单的放大和缩小功能。

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

还有另一个问题:是否有一种方法将鼠标滚轮应用到这个函数?

缩放的问题已经改变。现在鼠标滚轮也完成了但问题是我们不能给出鼠标滚轮的最大值。更新本

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

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

那么试试这个:

http://jsbin.com/itekek/4

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

编辑:

http://jsbin.com/itekek/46

添加鼠标滚轮支持

查看:http://jsbin.com/itekek/14/edit

你没有剥离缩放加上鼠标滚轮在这里…

Update:通过类名获取元素使用下面的函数:

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

看到示例

相关文章：