javascript - 相对于 div 中心的图像放大和缩小不起作用

Question

我的一个网站中有一个图像缩放属性。我想相对于 div 的中心缩放图像。

<div class="img"><img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg" /></div>

<input class="beta" type="button" onclick="zoom(1.1)" value="+">
<input class="beta" type="button" onclick="zoom(0.9)" value="-">

缩放功能如下。

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

我想相对于中心缩放图像。提前致谢。

Answer 1

这个怎么样http://jsfiddle.net/sajith/J6Y3X/

JS

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 = "-" + (wid * zm)/2 + "px"
    img.style.marginTop = "-" + (ht * zm)/2 + "px"
}

CSS

.img {
    width:450px;
    height:450px;
}
#pic {
    position: absolute;
    left: 225px;
    top: 225px;
    margin: -225px 0 0 -225px;
}

HTML

<div class="img"><img id="pic" src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg" /></div>

<input class="beta" type="button" onclick="zoom(1.1)" value="+">
<input class="beta" type="button" onclick="zoom(0.9)" value="-">