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
图片放大
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");
})
});