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

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

May 16, 2016 pm 04:45 PM
图片放大

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