Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / G ö rsel l eri n i ze Bü yü teç i l e Ba kı n
Görsellerinize Büyüteç ile Bakın Vatanay Özbeyli tarafından 11 Haziran 2013 tarihinde yazıldı. ~ 2 Yorum + Değiştir
Günümüzde neredeyse çoğu grafik sitesi görselleri için büyüteç tekniğini kullanmakta. Hatta sık sık ziyaret ettiğimiz alışveriş siteleri bile ürünlerini daha iyi sunmak için bu tekniği kullanmakta. Peki nasıl oluyorda imleci görsellerin üzerine getirince bir mercek içinden bakabiliyoruz? Bu makalemde bu soruyu birlikte cevap arayacağız. Biraz CSS, biraz HTML ve biraz da jQuery… Hadi başlayalım!
Başlangıç HTML ile yayınlayacağımız görseli biraz küçülteceğiz. JavaScript ile ise görselin orjinal boyutunu çekip CSS ile hazırladığımız mercek sayesinde listeleyeceğiz. Bu işlemi aktif ve ilgi çekici kılmak için ise jQuery kütüphanesine el atacağız. Sayfanızın <head></head> tagları arasına aşağıdaki jQuery linkini ekleyerek başlayın. 1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js </script>
CSS kodları Tasarımımızı oluşturmaya başlayalım. Ben büyüteç alanı için 400px değerini girdim. Buraya dikkat, bu alan aşağıdaki HTML kodundaki resmin width değeriyle aynı olmak zorunda.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
.buyutec { width: 400px; margin: 50px auto; position: relative; cursor: none} .mercek { width: 175px; height: 175px; position: absolute; border-radius: 100%; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); display: none; } .kucuk { display: block;}
Yukarıdaki CSS kodlarını da sayfanıza eklediyseniz sırada JS kodlarımız var.
JavaScript kodları Buradaki kodları ise <head></head> içerisinde, jQuery‘i eklediğiniz yerin hemen altına yazabilirsiniz. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<script> $(document).ready(function(){ var gercek_uzunluk = 0; var gercek_genislik = 0; $(".mercek").css("background","url('" + $(".kucuk").attr("src") + "') no-repeat"); $(".buyutec").mousemove(function(e){ if(!gercek_uzunluk && !gercek_genislik) { var image_object = new Image(); image_object.src = $(".kucuk").attr("src"); gercek_uzunluk = image_object.width; gercek_genislik = image_object.height; }else{ var buyutec_offset = $(this).offset(); var mx = e.pageX - buyutec_offset.left; var my = e.pageY - buyutec_offset.top; if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {$(".mercek").fadeIn(100);} else{$(".mercek").fadeOut(100);} if($(".mercek").is(":visible")) { var rx = Math.round(mx/$(".kucuk").width()*gercek_uzunluk $(".mercek").width()/2)*-1; var ry = Math.round(my/$(".kucuk").height()*gercek_genislik $(".mercek").height()/2)*-1; var bgp = rx + "px " + ry + "px"; var px = mx - $(".mercek").width()/2; var py = my - $(".mercek").height()/2; $(".mercek").css({left: px, top: py, backgroundPosition: bgp}); }
29 30 31 32
} }) }) </script>
HTML kodları Sırada görselimizi eklemek var. Tekrar belirtiyorum. Buradaki görselin width değeri CSS kodumuzdaki buyutec classının width değeriyle aynı olmak durumunda. Aksi durumlarda görselinizin dışarıda kalan alanlarında büyüteç çalışmayacaktır. 1 <div class="buyutec"> 2 <div class="mercek"></div> 3 <img class="kucuk" src="GÖRSEL-ADRESİ.jpg" width="400"/> 4 </div> Ve her şey hazır.
Kapanış Günümüzde jQuery kullanmayan web uygulaması kalmadı sanırım. Dahili olarak ise eklediğimiz birkaç satır CSS ve JS. İşte bütün bu basitlik hazırladığımız bu büyüteç örneğini gayet pratik ve kullanılır kılıyor. Bir o kadar da hızlı.
Benzer Konular: CSS ve jQuery Yardımıyla Resimlere Caption HTML5 ile Tam Ekran (Full Screen) jQuery ile Minimum ve Maksimum Karakter Limitli Form… CSS3 ve jQuery ile Google Play Tab Sadece CSS ile Yatay Menü
Yazı Kategorisi : CSS3 , HTML5 , jQuery , Tasarım Unsurları
Anahtar Kelimeler : büyüteç , çerçeve , css , gelince , görsel , html , java , jquery , magnify , resim , resimleri , üstüne , yakınlaştır , zoom