Question

情景：

我目前正在尝试使用脚本和东西构建一个穷人的Google地图来模拟所有功能。
我有一个巨大的图像，我切成了瓷砖并显示在一个网页上的表格。
我找到了一个允许用户点击的脚本并拖动以在地图中导航。

Todo：

现在我只需要实施变焦。
我找到了缩放单张图片的脚本，但我希望能够将整个页面缩小为单个元素。
由于我平铺了100张图像来创建地图，因此对每个切片都这样做是不实际的。

有没有办法做到这一点？

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

Answer 1

如果你可以使用jQuery：

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

Answer 2

看看this example，它可能对你有帮助。

基本上你必须绑定滚动事件并改变行为。该示例使用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">

为：

<table id="Table_01" boder="0" cellspacing="0" cellpadding="0">

Javascript鼠标滚轮缩放网页

2 个答案: