Javascript鼠标滚轮缩放网页 [英] Javascript Mouse Wheel Zooming for a Web Page

问题描述

情景：

• 我正在尝试使用脚本和东西构建一个穷人的谷歌地图模拟所有功能。


• 我有一个巨大的图像，我将其切成瓷砖并显示在网页上的
  表中。


• 我找到了一个脚本，允许用户点击
  并拖动以在地图中导航。

Todo：

• 现在我只需要实现
  zoom。



• 我找到了缩放单张图片的脚本，但我希望能够将整个页面缩小为单个元素。
  因为我有100个图像平铺来创建地图，所以对每个切片都这样做是不切实际的。
  
  有没有办法做到这一点？

• 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?

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

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!

推荐答案

看看此示例，它可能对您有帮助。

Take a look at this example, it might help you out.

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

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.

为了给你一条路径，这是你可以做的一个例子，考虑到您的页面HTML：

Just to give you a path to go, this is an example of what you can do, considering your page 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/

You can see this DEMO in action here: 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">

这篇关于Javascript鼠标滚轮缩放网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！