Efekt zoomowania zdjęcia w jQuery
Napiszemy skrypt do zoomowania zdjęcia w jQuery. Wykorzystamy właściwość css background-size. Będziemy ją modyfikować po kliknięciu na przycisk zoom in. Najpierw wstawmy kod html (2 przyciski i obrazek).
<div class="picture"></div> <button class="zoom">Zoom In</button> <button class="zoomout">Zoom Out</button>Obrazek jest divem, któremu nadamy background-image. Kod css wykorzystany w przykładzie jest następujący.
.picture { margin: 30px; width: 300px; height: 180px; background-image: url('flowers.jpg'); background-repeat:no-repeat; background-position: 50% 50%; background-size: 300px 180px; -webkit-transition: all 2.5s ease-in-out; -moz-transition: all 2.5s ease-in-out; -ms-transition: all 2.5s ease-in-out; -o-transition: all 2.5s ease-in-out; transition: all 2.5s ease-in-out } .picture.zoom { background-size: 1200px 720px !important; }Kod javascript przedstawia się następująco.
var picture = $('.picture:eq(0)'), picture_bg_size = picture.css('background-size'); $('.zoom:eq(0)').on('click', function() { if (!picture.hasClass('zoom')) { picture.addClass('zoom'); } }); $('.zoomout:eq(0)').on('click', function() { picture.removeClass('zoom'); picture.css('background-size', picture_bg_size); });Najpierw łapiemy div obrazka oraz jego właściwość background-size. Potem wywołujemy akcje w zależności, który przycisk został kliknięty (zoom in czy zoom out) tzn. manipulujemy właściwością background-size powiększając lub zmniejszając zdjęcie odpowiednio. Działający przykład.