Jquery ile dinamik resim boyutlandırmak ve rollover efekti ile resmin tam boyutunu otomatik açılan katmanda görmek |
||||||
Başlığın biraz karmaşık oldu biliyorum :) fakat burada web masterın kullandığı bir olaydan söz ediyorum. örnekle anlatayım:
Sayfada bir kaç tane sayfa dışına taşan resimler var diyelim. Bu büyük boyutlu resimleri dinamik olarak boyutlandırmak ya da küçültmek istiyorsunuz ve bunu kullanıcı tarafında JavaScript ile yapmak istiyorsunuz. Ayrıca küçültülen resimlerin üzerine fare imleci olduğunda (rollover) tam boyutlu hali görünsün diyorsanız aşağıdaki Jquery kodumuz tam istediğimiz işi görecek. Jquery ile bu işi halletmek çok kolay. Jquery kodumuz basit olarak iki temel olayı otomatik olarak yapacak:
Daha iyi anlaşılması için aşadaki resimde Jquery dinamik resim boyutlandırma scriptin çalışır haldeki haline bakabilirsiniz: Fare imleci buyuk boyutlu resim üzerinde iken tam boyutlu hali açılan katmanda gösteriliyor: ![]() Fare imleci küçük boyutlu resim üzerinde iken katman açılmıyor yani tam istediğimiz gibi : ![]() İşte tüm işi yapan Jquery kodumuz (Satır satır yorumlayarak ne yaptığımızı anlatmaya çalıştım) (Jquery ile dinamik resim boyutlandırmak) : // Tüm sayfa ve resimler yüklenince fonksiyonlar tetiklenecek $(window).load(function() { // tüm img elamanlarını bulup özellik ve olaylar ekliyoruz. $('img').each(function() { // Gösterilecek maximum resim genişliğini burada yazıyoruz var WidthMax = 350; // Gösterilecek maximum resim yüksekliği burada yazıyoruz var HeightMax = 300; // Resmin orijinal genişliğini al var width = $(this).width(); // Resmin orijinal yüksekliğini al var height = $(this).height(); // maximum genişlik veya yüksekliği aştığını kontrol et if((width > WidthMax) || (height > HeightMax)){ // Resmin aşılan sınırına göre yüksekliği ya da genişliği değiştir. // Resmin oranı otomatik olarak korunacaktır. if (width > WidthMax) $(this).css("width", WidthMax); else $(this).css("height", HeightMax); $(this).mouseover( function () { // Fare imleci resmin üzerine gelirse id özniteliği out olan bir katman oluşturup // body elamanıa ekleyecek kodu buraya yazıyoruz. // oriijinal boyutlara sahip resmi barındıracak katmanın eklenip eklenmediğini // kontrol ediyoruz. if ( $('#out').length == 0 ) { // gösterilecek katmanı oluşturup direk body elemanına ekliyoruz. // oluşturulan katmanın içine tam boyutlu resmi ekiliyoruz. $('body').append("<div id=\"out\" > <img src=\""+$(this).attr("src")+"\" > </div>"); $('#out').css("position","absolute").css("border","3px solid gray"); } } ).mouseout( function () { // fare resmin üzerinden kalkınca açılan katmanı yok et. $('#out').remove(); } ).mousemove(function(e){ // Fare imleci resmin üzerinde gezinirken açılan katmanın pozisyonunu // değiştirecek kodu buraya yazıyoruz. // farenin kordinatlarını al var x=e.pageX ; var y=e.pageY ; // açılan katmanın posizyonunu fare imlecinin pozisyonuna göre değiştir. $('#out').css("top", y+15); $('#out').css("left", x+15); } ); } }); }); Kodumuz aslında göründüğünden daha anlaşılır. Kodu biraz daha modifiye edip animasyon ekleyebilirsiniz. Örneğin çalışır haline buradan bakabilir buradan örneğini indirebilirsiniz. |
||||||
|
||||||
|
May 2013 (1)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
Mysql veritabanında Fu ..
PHP ile JSON veri oluş ..
ASP.NET ve PHP ortamın ..
MySql veritabanı bağla ..
Java Mobile 3D Oyun Pr ..
Apache URL Rewriting v ..
PHP Pear MDB2 modülü i ..
More Effective C#: 50 ..
PHP PEAR MDB2 modulü i ..
Bir Tasarım Şablonu: S ..
PHP ile JSON veri oluş ..
ASP.NET ve PHP ortamın ..
MySql veritabanı bağla ..
Java Mobile 3D Oyun Pr ..
Apache URL Rewriting v ..
PHP Pear MDB2 modülü i ..
More Effective C#: 50 ..
PHP PEAR MDB2 modulü i ..
Bir Tasarım Şablonu: S ..
Etiketler
| Arama-motorları | Asp.net | Binary-data | Bot | Css | Form-tooltip-hazırlamak | Gridview | İnput | Jquery | Jquery-kütüphanesi | Json | Jsonencode | Kimlik | Linq | Linq-to-sql | Mysql | Özel-içerik | Php | Select | Veri-oluşturma | Veritabanı | Veritabanı-işlemleri | View | Ziyaretçi |arama
Loading
sosyal




