jQuery efect de zoom pentru imagini

animatii jQuery, functii javascript, invata Javascript, invata jQuery, javascript, jQuery

Sa vedem cum putem face un efect foarte simplu de zoom in/zoom out pentru imagini folosind jQuery. Efectul va fi activat la trecerea mouse-ului peste imagine.

Sa vedem structura HTML pentru nevoile noastre.

[...]
<a class="a-zoom" href="#"><img class="img-zoom" src="img.jpg" width="300" height="225" /></a>
[...]

Practic avem o imagine img.jpg cu clasa img-zoom intr-un element a cu clasa a-zoom.

Acum sa definim cele 2 clase.

.a-zoom {
	display: block;
	width: 300px;
	height: 225px;
	overflow: hidden;
	border: 3px solid green;
	position: relative;
}
.img-zoom {
	position: absolute;
}

Este foarte important sa setam pozitia absoluta pentru imagine si relativa pentru link! Altfel nu vom putea centra zoom-ul pe imagine.

Sa vedem si JavaScript-ul care ne va genera acest efect.

<script type="text/javascript">
jQuery(document).ready(function () {
	$('.img-zoom').hover(function() {
   		$(this).stop().animate({ width: '600px', height: '450px', top: '-125px', left: '-150px'}, 200);
     },function() {
   		$(this).stop().animate({ width: '300px', height: '225px', left: '0px', top: '0px'}, 500);
     });
});
</script>

Simplu, nu? Atunci cand mouse-ul ajunge pe imagine, animam dimensiunile pozei si pozitia acesteia. Atunci cand mouse-ul iese din imagine aducem totul la normal.

Sa vedem si cum arata acest efect in practic, nu doar in teorie:

Este foarte important sa setati corect pozitia top si left pentru animatie. Nu este o chestie standard, depinde de marimea imaginii. Pentru exemplul atasat, imaginea are dimensiunea de 600 x 450.

Nume: jQuery Zoom Image (67.29KB) Descriere: Efect de zoom pentru imagini Descarcari: 5 Puncte de activitate necesare: 100 puncte Punctele tale: Nu ai suficiente puncte de activitate (mai multe detalii)

Daca aveti intrebari sau sugestii nu ezitati sa le adaugati.

Ti-a placut articolul jQuery efect de zoom pentru imagini?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

• jQuery tooltip cu imagini
• Animatii jQuery pentru text
• Casute animate folosind jQuery
• Zi si noapte folosind JavaScript si jQuery
• Tastatura virtuala folosind jQuery