JavaScript鼠标滚轮缩放网页

Question

场景：

• 我目前正在尝试使用脚本和其他工具模拟所有功能，构建一个穷人版的谷歌地图。
• 我有一张巨大的图片，把它切成瓦片，并在网页上以表格形式展示。
• 我找到了一个脚本，使用户可以点击并拖动来浏览地图。

代办事项：

• 现在，我只需要实现缩放功能。

• 我找到了可以缩放单个图像的脚本，但我想能够将整个页面作为单个元素缩放。
  由于我有100个瓦片来创建地图，为每个单独的瓦片进行缩放不是实际的。

  
  

  有办法做到这一点吗？

  
  到目前为止，我已经完成的页面可以在http://minecraft.firedrakecreative.com找到，
  然后点击缩略图即可。
  非常感谢您的帮助！

- user1158375

Answer 1

如果您会使用jQuery：

$('domElement').bind('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta / 120 > 0) {
        alert('Up');
    } else {
        alert('Down');
    }
});

- David Slavík

Answer 2

看看这个例子，可能会对你有帮助。

基本上，你需要绑定滚动事件并改变行为。该示例使用CSS3转换，如果它不适用于旧浏览器，因为它需要在旧浏览器上工作，您可能需要更改图像大小。但是仍然有一些浏览器无法呈现更改后的图像大小。

只是为了给你一个前进的方向，这是一个你可以考虑的例子，考虑你页面的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);

您可以在此处查看此DEMO的运行情况: http://jsfiddle.net/qG6qm/3/

重要提示：若要使此代码正常工作，您需要更改表格标签为:

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

- Karl Mendes

---

哇，那看起来对于我的能力水平来说太复杂了，但是感谢提供链接！这给了我一个新的搜索词去尝试。 - user1158375

我修改了答案，以便更详细地说明应该做什么。 - Karl Mendes

谢谢您! 我需要稍微调试一下才能使其完美运行，但这基本上是我所需要的。再次感谢！ - user1158375