1

我已经实现了 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";
}
4

2 回答 2

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事件侦听器删除并绑定到buttonJavaScript 中的 s。

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()直接 修改. 如果你愿意，你可以添加更高级的东西（和东西）。widthheightHTMLImageElementstyle

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

请参阅jsFiddle。

于 2013-08-08T15:50:41.927 回答
1

试试这个！

由于您在头脑中做所有事情，因此我添加了一个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";
}
于 2013-08-08T15:50:55.023 回答