Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-05-16 16:45:25
Original
1532 Leute haben es durchsucht

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");
})
});