Javascript鼠标滚轮缩放网页

Javascript Mouse Wheel Zooming for a Web Page

本文关键字：缩放 网页 鼠标 Javascript      更新时间：2023-09-26

场景：

  • 我目前正在尝试用脚本和东西来模拟所有功能，构建一个穷人的谷歌地图
  • 我有一个巨大的图像，我把它切成了瓷砖，并显示在表
  • 我找到了一个脚本，该脚本允许用户单击并拖动以在地图上导航

Todo:

  • 现在我只需要实现缩放

  • 我找到了缩放单个图像的脚本，但我希望能够将整个页面缩小为一个元素
    因为我有100个图像平铺来创建地图，所以对每个单独的切片进行平铺是不现实的

    有办法做到这一点吗？


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

如果您可以使用jQuery:

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

看看这个例子，它可能会对您有所帮助。

基本上，您必须绑定滚动事件并更改行为。该示例使用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);

你可以在这里看到这个演示：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">
相关文章：