Javascript Mouse Wheel Zooming for a Web Page - Stack Overflow

admin管理员组

文章数量:1301597

Scenario :

• I'm currently trying to build a poor man's Google Maps using scripts and things to simulate all the functions.
• I have a massive image that I sliced up into tiles and display in a table on the web page.
• I found a script that enables a user to click and drag to navigate around the map.

Todo :

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

  
  The page I have so far can be found at ,
  and then click on the thumbnail.
  Any help is much appreciated!

Scenario :

• I'm currently trying to build a poor man's Google Maps using scripts and things to simulate all the functions.
• I have a massive image that I sliced up into tiles and display in a table on the web page.
• I found a script that enables a user to click and drag to navigate around the map.

Todo :

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

  
  The page I have so far can be found at http://minecraft.firedrakecreative.,
  and then click on the thumbnail.
  Any help is much appreciated!

• javascript
• zooming

Share Follow edited Nov 6, 2018 at 10:25 Abhishek Kumar 2,5391212 silver badges2626 bronze badges asked Jan 19, 2012 at 11:52 user1158375user1158375

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you can use jQuery:

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

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

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.

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);

You can see this DEMO in action here: http://jsfiddle/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 Mouse Wheel Zooming for a Web PageStack Overflow