javascript - 放大 - 缩小不能正常工作

Question

我实现了 3 个按钮来允许用户放大、缩小和返回到默认大小。

脚本可以进行放大和缩小，但我还有 2 个问题无法解决。

第一个问题:

每次放大时，要缩放的图像仍然到达我的窗口的限制，当图像左右没有任何空间时，它会将图像拉伸(stretch)到顶部和底部。

第二个问题:我无法将按钮上的 onclick 处理程序设置为默认大小。

我希望有人能帮我解决这个问题。

FIDDLE

我的代码:

HTML:

<div id="thediv"> 
  <img id="pic" src="images/2.png"/>
</div>
<input type="button" value ="-" onclick="zoom(0.9)" id="minus"/>
<input type="button" value ="+" onclick="zoom(1.1)" id="plus"/>
<input type="button" value ="1" onclick="zoom(1.1)" id="1" style="margin-left:80px;position:fixed;bottom:0px;"/>

CSS:

#thediv {
    margin:0 auto;
    height:auto;
    width:1005;
    overflow:hidden;
    }

#thediv img {
    position: relative;
    left: 50%;
    top: 50%;
}
#minus{position:fixed;bottom:0px}
#plus{position:fixed;bottom:0px;margin-left:40px;}

Javascript:

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

Answer 1

HTML

<div id="thediv">
    <img id="pic" src="http://cdn.crunchify.com/wp-content/uploads/2012/10/java_url.jpg" />
</div>
<button type="button" id="minus">-</button>
<button type="button" id="plus">+</button>
<button type="button" id="reset">1</button>

我已经删除了 onclick 并将事件监听器绑定(bind)到 JavaScript 中的 button。

JavaScript

// For the "reset" (1) button to work, you must store the default size somewhere
var defaultWidth = document.getElementById("pic").width;
var defaultHeight = document.getElementById("pic").height;
var resetZoom = function () {
    var img = document.getElementById('pic');
    img.width = defaultWidth;
    img.height = defaultHeight;
};

var zoom = function (zm) {
    'use strict';

    var img = document.getElementById("pic");

    img.width *= zm;
    img.height *= zm;
};

document.getElementById('minus').addEventListener('click', function () {
    zoom(0.9);
}, false);

document.getElementById('plus').addEventListener('click', function () {
    zoom(1.1);
}, false);

document.getElementById('reset').addEventListener('click', function () {
    resetZoom();
}, false);

1. 我添加了 resetZoom() 函数，它的工作方式与 zoom() 不同。

2. 我还简化了 zoom() 函数以直接修改HTMLImageElement 的 width 和 height 属性.如果需要，您可以添加更高级的东西(样式 和东西)。

3. 下面的三个事件监听器绑定(bind)到按钮以触发 click 事件的函数。在本例中，它分别执行zoom 和resetZoom。

参见 jsFiddle .