Heim  >  Artikel  >  Web-Frontend  >  Beispiel für einen einfachen jQuery-Bildvergrößerungseffekt: code_jquery

Beispiel für einen einfachen jQuery-Bildvergrößerungseffekt: code_jquery

WBOY
WBOYOriginal
2016-05-16 16:45:251510Durchsuche

Klicken Sie in der DEMO auf das kreisförmige Bild, Bildmethode, und platzieren Sie das Wasserbild auf der unteren Ebene. Wenn die Maus nach oben bewegt wird, erhöhen sich Höhe und Breite des Bildes proportional und das Bild wird nach links oben verschoben

Code

Code kopieren Der Code lautet wie folgt:




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"},"slow");
$("#img2").stop(true,true).animate({top:"0px",left:"0px" , width:"95px",height: "95px"},"slow");
$("#img3").stop(true,true).animate({top:"0px",left:"0px ", width:"33px",height:"33px"},"slow");
})
});