Question

我已经实现了3个按钮，允许用户放大，缩小和恢复默认大小。

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

第一个问题：

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

第二个问题： 我无法将按钮上的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并将事件侦听器绑定到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);

我添加了resetZoom()功能，其功能与zoom()不同。
我还简化了zoom()函数来直接修改 HTMLImageElement的width和height属性。如果您愿意，可以添加发烧友的东西（style和东西）。
下面的三个事件侦听器绑定到按钮以触发click事件上的函数。在这种情况下，它分别执行zoom和resetZoom。

请参阅jsFiddle。

Answer 2

Try this！

由于您正在做所有事情，我添加了onload函数而不是您的window.onload，但这不起作用。我还添加了toDefault函数，将图像恢复到原始大小/位置

更新了HTML

<body>
<div id="thediv">
    <img onload='load()' id="pic" src="http://cdn.crunchify.com/wp-content/uploads/2012/10/java_url.jpg" />
</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="Default" onclick="toDefault()" id="one" style="position:fixed;bottom:0px;margin-left:80px" />
</body>

更新了javascript

var origHeight, origWidth;
function load () {
    var image = document.getElementById("pic");
    origHeight = image.offsetHeight + 'px',
    origWidth = image.offsetWidth + 'px';
}

function toDefault() {
    var image = document.getElementById("pic");
    image.style.height = origHeight;
    image.style.width = origWidth;
    image.style.marginLeft = -(image.width / 2) + "px";
};

function zoom(zm) {
    var 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";
}

放大 - 输出无法正常工作

2 个答案:

HTML

的JavaScript