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
Vous devez vous connecter pour publier un commentaire.
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:
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:
:
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
Si vous pouvez utiliser jQuery:
OriginalL'auteur David Slavík