放大 - 缩小无法正常工作

Zoom In - Out doesn´t work correctly

本文关键字：工作 常工作 缩小 放大      更新时间：2023-09-26

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

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

第一个问题：

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

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

我希望有人能帮我一把。

小提琴

我的代码：

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

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>

我已经删除了 JavaScript 中button 的onclick和绑定的事件侦听器。

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()函数以直接修改 width和height HTMLImageElement的属性。如果你愿意，你可以添加更花哨的东西(style和东西(。

  3. 下面的三个事件侦听器绑定到按钮以触发click事件上的函数。在这种情况下，它分别执行 zoom 和resetZoom。

参见 jsFiddle。

试试这个！

由于您在脑海中执行所有操作，因此我添加了一个onload函数而不是您的window.onload，这不起作用。我还添加了一个toDefault功能，可以将图像恢复到原始大小/位置

更新的网页 

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

更新的脚本

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";
}
相关文章：