augmenter/diminuer le css largeur sur cliquez avec jquery/javascript
J'aurais besoin de progressivement augmenter et diminuer la largeur d'un élément img à l'intérieur d'un fixe la largeur et la hauteur de la div, disons +10%/-10%
, sur un clic d'un bouton. Comment puis-je le faire? Ce dont j'ai besoin pour atteindre une sorte de zoom de l'élément img contenue à l'intérieur de la div (qui a overflow:auto
).
Je suis à l'aide de jquery et jquery ui car j'en aurais besoin pour être de défilement panoramique. Le résultat devrait être quelque chose comme facebook couvre, où vous avez une image qui s'adapte à son conteneur (et c'est déjà mis en œuvre), mais où l'utilisateur peut effectuer un zoom in/out le contenu de l'élément img et pan autour de la manière dont elle semble la meilleure.
Je n'ai aucune idée de comment le faire, s'il vous plaît aider!
Merci beaucoup
- montrez-nous ce que vous avez essayé déjà. Nous avons déjà la réponse, mais c'est mieux si nous vous aidons à trouver où vous avez eu tort, au lieu
- C'est assez simple question à résoudre. Merci d'éditer votre question d'inclure le code que vous avez jusqu'à présent.
- en fait, je suis en train de travailler sur une solution complexe et je n'ai pas de code réel à présenter, pour le code, je travaille sur n'est pas le mien et il contient LIFERAY variables et une tonne de choses que je ne sais vraiment pas sur.. je ne suis pas qualifié en javascript donc un exemple propre pourrait m'aider à l'intégrer dans ce que im (d'essayer) de travailler sur 🙂
Vous devez vous connecter pour publier un commentaire.
DÉMO: http://jsfiddle.net/7gVgX/
JQuery
/ 1.1
Vous pouvez obtenir une largeur de l'image en faisant:
var w = $("#image_id").css("width");
pour l'augmenter de 10%, vous pouvez multiplier par 1.1:
w = w * 1.1;
et vous pouvez appliquer ce changement de l'image en faisant:
$("#image_id").css("width", w + "px");
simplement obtenir la largeur de l'image courante et l'incrément ou le soustraire.
permet de dire que le css est:
et certains js:
ou, avec l'animation: