demande s'il y a un plugin jquery que lorsque votre souris sur une image, cette image va augmenter en taille et si votre souris est hors de l'image qu'elle va diminuer en taille tout cela comme transition en douceur. merci!l'image jquery Redimensionner transition onMouseOver
Vous pouvez essayer le Zoomer gallery plugin ou lancer le vôtre en vous basant sur this tutorial. Personnellement j'irais sur la route du tutoriel car cela vous donnera plus de contrôle sur le résultat (et vous apprendrez quelque chose à démarrer;)
Si vous voulez juste une image, vous pouvez utiliser les effets de l'interface utilisateur de jQuery. Notez que ceci est distinct de la base jQuery - ajoutez ceci ci-dessous votre appel de jQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
Maintenant que vous avez ajouté un lien vers l'interface utilisateur, nous pouvons utiliser la bibliothèque d'effets comme ceci:
scénario:
$(document).ready(function() {
$('#imgid').hover(function(){$(this).effect("scale",{percent:200},500)}, function(){$(this).effect("scale",{percent:50},500)})
});
html:
<img id="imgid" src="path/to/img.png" alt="(Vacation Slide)">
Juste Rappelez-vous que lorsque vous mettez à l'échelle quelque chose, vous devez comprendre comment réduire la taille, car la nouvelle taille sera de 100%. Dans mon code, nous le doublons (200%), puis le réduisons de moitié (50%) pour revenir à l'original. N'hésitez pas à jouer avec le temps de transition, et tous les rappels dont vous pourriez avoir besoin pour l'obtenir parfait.
Lien vers le jQuery .hover() et jQuery UI effects
Il est un hack jQuery:
$(document).ready(function() {
$('#target_selector').mouseover(function(){
$(this).css('height':'value', 'width':'value')
$(this).mouseout(function(){
$('this').css('height':'value', 'width':'value')
});
});
});
Mais vous pouvez utiliser une pseudo-classe CSS,: hover
#target_selector {
height: value;
width: value;
}
#target_selector:hover {
height: value;
width: value;
}
pourrait être soit appliqué à cet échantillon HTML
<html>
<body>
<img id="target_selector" />
</body>
</html>
essayer ce http://justinfarmer.com/?p=14, et voici une démo http://justinfarmer.com/tutorials/imageexpansion/imageexpansion.html. Je pense que c'est juste ce dont tu as besoin. – starikovs