Javascript Girl
  1. Javascript Girl
  3. Augmentation de la taille de l'image Jquery onmouseover
Intereting Posts
Qu'est-ce qu'une méthode stub dans MeteorJS? Quelle est la vraie signification de la valeur retournée de `delete`? Android: comment sélectionner le texte de WebView et le mettre en surbrillance Créer un serveur Node JS qui stocke et affiche les données en fonction du jour de la semaine Authentification de connexion UI-Routeur angulaire JQuery data () renvoie indéfini, attr () renvoie l'entier Fenêtre centrale. Ouvrir le formulaire sous Lorsque vous utilisez le Bootstrap de Twitter, comment puis-je modifier le contenu d'un popover? Stockage de données personnalisées dans des éléments dom Quelle est la différence entre dnode et nowjs? Pageshow non déclenché après changement de page API gratuite de traitement OCR en PHP / jQuery / JavaScript Mise à jour FB: comme URL dynamiquement en utilisant JavaScript Point d'intersection dans le graphique linéaire dans Chart.js? Capturez la vidéo de plusieurs webcams avec getUserMedia

Augmentation de la taille de l'image Jquery onmouseover

J'essaie de faire un effet où lorsque la souris survient sur une image, elle augmente de 50% de sa taille et remonte dès que la souris sort de sa région. Est-il possible de le faire avec jquery? Comment? Est-il possible de le faire sans jquery? Quelle difficulté serait-il de le faire sans jquery?

Voici: 

$('img').load(function() { $(this).data('height', this.height); }).bind('mouseenter mouseleave', function(e) { $(this).stop().animate({ height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1) }); });

Démo en direct: http://jsfiddle.net/simevidas/fwUMx/5/

Vous pouvez le faire en utilisant un CSS pur. Voici un exemple en cours d'exécution .

Compte tenu de ce code HTML: 

 <img class="foo" src="/img/logo.png">

Ajouter ce CSS: 

 body { background-color: black } .foo { height:25px; } .foo:hover { height:50px; }

Utilisez jQuery si l'un de vos navigateurs cible ne prend pas en charge un CSS décent, mais j'ai testé IE8, et il prend en charge cela.

Il est possible de le faire avec jQuery, qui est une bibliothèque JavaScript , et alors: vous pouvez également utiliser JavaScript simple.

JQuery: 

 var $image = $('#imageID'), //Or some other selector imgWidth = $image.width(), imgHeight = $image.height(); $('#imageID').hover(function() { //The mouseover $(this).width( imgWidth * 2); $(this).height( imgHeight * 2); }, function() { $(this).width( imgWidth ); $(this).height( imgHeight ); });

Simple JavaScript:
Voir l'exemple ici: http://jsfiddle.net/axpVw/ 

 var image = document.getElementById('imageID'), imageWidth = image.width, imageHeight = image.height; image.onmouseover = function() { image.width = 2 * imageWidth; image.height = 2 * imageHeight; } image.onmouseout = function() { image.width = imageWidth; image.height = imageHeight; }

C'est une tâche facile dans les deux sens. J'ai des violons pour vous avec un exemple dans les deux sens:

  1. Jquery : http://jsfiddle.net/G7yTU/ 

     $(document).ready(function(){ var ht= $("img").height(), wd=$("img").width(), mult=1.5; //change to the no. of times you want to increase your image //size. $("img").on('mouseenter', function(){ $(this).animate({height: ht*mult, width: wd*mult}, 500); }); $("img").on('mouseleave', function(){ $(this).animate({height: ht, width: wd}, 500); }) });

  2. CSS : http://jsfiddle.net/zahAB/1/ 

     img{ -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; } img:hover{ width:150px; height:150px; }

Si vous avez besoin d'aide, contactez.