Javascript Molette de la Souris Zoom sur une Page Web

Scénario :

  • Je suis en train d'essayer de construire un pauvre homme de Google Maps à l'aide de scripts et de choses à simuler toutes les fonctions.
  • J'ai une énorme image que j'ai découpé en carreaux et affichage en
    tableau sur la page web.
  • J'ai trouvé un script qui permet à un utilisateur de cliquer sur
    et faites-le glisser pour naviguer sur la carte.

Todo :

  • Maintenant j'ai juste besoin de mettre en œuvre
    zoom.
  • J'ai trouvé des scripts pour agrandir les images, mais je veux être en mesure de zoom de la page entière comme un seul élément.
    Depuis que j'ai 100 images en mosaïque pour créer la carte, c'est pas pratique de le faire pour chaque tranche.

    Est-il un moyen de faire cela?

    La page je l'ai peut être trouvé à http://minecraft.firedrakecreative.com,
    et puis cliquez sur la vignette.
    Toute aide est très appréciée!

OriginalL'auteur | 2012-01-19

  1. 1

    Prendre un coup d'oeil à cet exemple, il pourrait vous aider.

    Fondamentalement, vous allez avoir du fil à lier l'événement scroll et de modifier le comportement. L'exemple utilise des transformations CSS3, si cela ne fonctionne pas pour vous, car il a besoin de travailler sur les anciens navigateurs, vous devrez modifier les dimensions des images. Mais encore certains navigateurs ne pas rendre le changement de la taille d'une image.

    Juste pour vous donner un chemin pour aller, c'est un exemple de ce que vous pouvez faire, compte tenu de votre 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);

    Vous pouvez voir cette DÉMONSTRATION en action ici: http://jsfiddle.net/qG6qm/3/

    IMPORTANT: pour que ce code fonctionne, vous devez changer votre balise de la table à partir de:

    <table id="Table_01" width="5000" height="5000" boder="0" cellspacing="0" cellpadding="0">

    :

    <table id="Table_01" boder="0" cellspacing="0" cellpadding="0">
    Wow, ça a l'air trop compliqué pour mon niveau de compétence, mais merci pour le lien! Il m'a donné un nouveau terme de recherche pour essayer.
    J'ai changé la réponse à donner un peu plus de détails à propos de quoi faire.
    Merci pour cette! Je vais devoir jouer avec elle un peu pour qu'il fonctionne parfaitement, mais c'est exactement ce dont j'avais besoin. Merci encore!

    OriginalL'auteur Karl Mendes

  2. 2

    Si vous pouvez utiliser jQuery:

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

    OriginalL'auteur David Slavík