网页的 Javascript 鼠标滚轮缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8925573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Mouse Wheel Zooming for a Web Page
提问by
Scenario :
设想 ：
- I'm currently trying to build a poor man's Google Maps using scripts and things to simulate all the functions.
- I have a massive image that I sliced up into tiles and display in a table on the web page.
- I found a script that enables a user to click and drag to navigate around the map.
- 我目前正在尝试使用脚本和东西来模拟所有功能来构建一个穷人的谷歌地图。
- 我有一个巨大的图像，我将其切成小块并显示在网页上的表格中。
- 我找到了一个脚本，使用户可以单击并拖动以在地图上导航。
Todo :
去做 ：
- Now I just need to implement zoom.
I found scripts to zoom single images but I want to be able to zoom the entire page out as a single element.
Since I have 100 images tiled to create the map, it's not practical to do it for each individual slice.
Is there a way to do this?
The page I have so far can be found at http://minecraft.firedrakecreative.com,
and then click on the thumbnail.
Any help is much appreciated!
- 现在我只需要实现缩放。
我找到了缩放单个图像的脚本，但我希望能够将整个页面缩小为单个元素。
由于我平铺了 100 张图像来创建地图，因此对每个单独的切片都这样做是不切实际的。
有没有办法做到这一点？
我目前拥有的页面可以在http://minecraft.firedrakecreative.com找到，
然后单击缩略图。
任何帮助深表感谢！
采纳答案by Karl Mendes
Take a look at this example, it might help you out.
看看这个例子，它可能会帮助你。
Basically you're gonna have to bind the scroll event and change the behavior. The example uses CSS3 transformations, if that doesn't work for you because it needs to work on old browsers you might need to change the images sizes. But still some browsers don't render the changed size of an image.
基本上你必须绑定滚动事件并改变行为。该示例使用 CSS3 转换，如果这对您不起作用，因为它需要在旧浏览器上运行，您可能需要更改图像大小。但是仍然有一些浏览器不渲染改变后的图像大小。
Just to give you a path to go, this is an example of what you can do, considering your page HTML:
只是为了给你一条路，这是一个你可以做的例子，考虑到你的页面 HTML：
window.addEventListener('scroll',function(){
var scrolled = window.scrollY / ( document.getElementById("Table_01").offsetHeight );
console.log("window.scrollY: " + window.scrollY);
console.log("scrolled: " + scrolled );
var zoomLevels = 1; //change to have a different behavior
var scale = Math.pow( 3, scrolled * zoomLevels);
var images = document.getElementById("Table_01").getElementsByTagName("img");
console.log("scale:" + scale);
for(i=0;i<images.length;i++){
images[i].width = Math.round(500/scale); //change 500 to your image size
images[i].height = Math.round(500/scale); //change 500 to your image size
}
},true);
You can see this DEMO in action here: http://jsfiddle.net/qG6qm/3/
你可以在这里看到这个演示：http: //jsfiddle.net/qG6qm/3/
IMPORTANT: for this code to work you have to change your table tag from:
重要提示：要使此代码起作用，您必须从以下位置更改表标记：
<table id="Table_01" width="5000" height="5000" boder="0" cellspacing="0" cellpadding="0">
to:
到：
<table id="Table_01" boder="0" cellspacing="0" cellpadding="0">
回答by David Slavík
If you can use jQuery:
如果你可以使用jQuery：
$('domElement').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
alert('Up');
} else {
alert('Down');
}
});
