Maison  >  Article  >  interface Web  >  jQuery simple effet de grossissement d'image exemple code_jquery

jQuery simple effet de grossissement d'image exemple code_jquery

WBOY
WBOYoriginal
2016-05-16 16:45:251540parcourir

DEMO cliquez sur l'image circulaire, méthode image, placez l'image de l'eau sur le calque inférieur Lorsque la souris monte, la hauteur et la largeur de l'image augmentent proportionnellement, et l'image se déplace vers le coin supérieur gauche

Code.

Copier le code Le code est le suivant :





Document sans titre
script>
$(document) .ready(function(e) {
$(".water1").mouseover(function(){
$("#img1").stop(true,true ).animate({top:"- 32.5px",left:"-32.5px", width:"400px",height:"400px"},"slow");
$("#img2"). stop(true,true).animate( {top:"-10px",left:"-10px", width:"115px",height:"115px"},"slow"); ").stop(true,true) .animate({top:"-4px",left:"-4px", width:"41px",height:"41px"},"slow");
})
$(".water1" ).mouseout(function(){
$("#img1").stop(true,true).animate({top:"0px",left:"0px", width:"335px",height:" 335px"},"lent");
$("#img2").stop(true,true).animate({top:"0px",left:"0px" , largeur : "95px", hauteur : "95px"}, "lent");
$("#img3").stop(true,true).animate({top:"0px",left:"0px ", width:"33px",height :"33px"},"slow");
})
});


"show">
< ;div class="water1">
="eau2">






Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:JavaScript contrôle l'insertion de texte à la position du curseur, adapté aux compétences d'insertion d'émoticônes_javascriptArticle suivant:JavaScript contrôle l'insertion de texte à la position du curseur, adapté aux compétences d'insertion d'émoticônes_javascript

Articles Liés

Voir plus