网页的Javascript鼠标滚轮缩放

场景：

• 我目前正在尝试使用脚本和东西来模拟所有功能，构建一个穷人的谷歌地图
• 我有一个巨大的图像，我把它切成了瓦片，然后以一个 网页上的表
• 我发现了一个脚本，允许用户单击 并拖动以在地图上导航

待办事项：

• 现在我只需要实现 缩放
• 我找到了用于缩放单个图像的脚本，但我希望能够将整个页面作为单个元素缩小
  因为我有100个图像平铺来创建地图，所以对每个单独的切片进行平铺是不实际的。
  
  有什么方法可以做到这一点吗
  
  我目前拥有的页面可以在，
  找到，然后单击缩略图<非常感谢您的帮助

看看，它可能会帮你解决问题
基本上，您必须绑定scroll事件并更改行为。该示例使用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);

window.addEventListener（'scroll'，function（）{
var scrolled=window.scrollY/（document.getElementById（“Table_01”）.offsetHeight）；
console.log（“window.scrollY:+window.scrollY”）；
console.log（“滚动：”+滚动）；
var zoomLevels=1；//更改为具有不同的行为
var scale=Math.pow（3，滚动*缩放级别）；
var images=document.getElementById（“表_01”）.getElementsByTagName（“img”）；
控制台日志（“比例：+比例）；
对于（i=0；i，如果可以使用jQuery：

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

哇，对于我的能力水平来说，这看起来太复杂了，但是谢谢你的链接！它给了我一个新的搜索词来尝试。我改变了答案，给出了更多关于该做什么的细节。谢谢你！我将不得不玩一点来让它完美工作，但这基本上是我需要的。再次感谢！
<table id="Table_01" boder="0" cellspacing="0" cellpadding="0">

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