sohbet odaları

JavaScript - Kayan logo çalışması

RüzGaR'

Kayıtlı Üye
Katılım
16 Haziran 2011
Mesajlar
803
Puanları
16
Yaş
26
Tepkime puanı
0
Html öğrenmek için uğraşıldığında javascript nesnelerinin ve bu nesnelerin özelliklerinin kullanılmasının öğrenilmesi önemlidir. Bu nedenle değişik alıştırmalar yaparak nesneler üzerinde çalışılması gerekmektedir. Bu yazımızda window nesnesi nin iki özelliğini öğreneceğiz ve bu iki özellikten birtanesini kullanarak kayan logo scriptini birlikte hazırlayacağız. dHtml çalışması olduğundan bu işlemi yaparken browserler arasındaki farkları da göreceğiz.

Script ne yapacak?
Hazırlayacağımız script sayfa üzerine yerleştirilen bir logoyu sayfa kaydırma çubukları kullanılarak hareket ettirildiğin de sayfa üzerinde hep aynı konumda kalmasını sağlayacak ve böylece logo devamlı olarak sayfa içerisinde görüntülenecek. Aslında bir çok uygulamada kullanabileceğiniz bu scripti ayrıca ekranda devamlı olarak görüntülenmesini istediğiniz bir menü için de kullanabilirsiniz.

Nasıl çalışıyor?
Sayfa içerisinde bir katman tanımlayarak bu katman içerisine logomuzu yerleştiriyoruz. Sonrada sayfanın en üst noktasını devamlı olarak denetliyoruz. Eğer sayfa kaydırılırsa sayfanın en üst noktasının değeri değiştiriliyor ve bizde orantılı olarak hazırladığımız katmanın konumunu değiştiriyoruz. Bu şekilde katman sayfa aşağı kaydırıldığında katmanda aşağıya doğru kaydırılıyor, eğer sayfa yukarıya doğru kaydırılırsa katmanda yukarıya doğru kaydırılıyor.

Sayfanın en üst noktasını bulmak için ise window nesnesinin özelliklerinde yararlanıyoruz. Window nesnesi kullanılarak sayfanın en üst noktasının değerini ve en sol noktasının değerini bulabiliriz.

Window nesnesinin bazı özellikleri
Window nesnesinin bir çok özelliğinden ikisi bize sayfanın görünen en üst noktasını bildiren pageYOffset ( İnternet Explorer için ise body.scrollTop ), ve sayfanın görünen en sol noktasını bildiren pageXOffset ( IE için body.scrollLeft ) özellikleridir. Bu özellikler sayfanın görünen noktaları üzerinde çalışır. Aslında sayfanın başlangıç değerleri 0, 0 dır. Fakat ekranda görünen ilk noktalar sayfa kaydırıldığında değişir. Bu özeklikleri nasıl kullandığımızı görelim. İlk olarak Netscape için :

Kod:
 Kodları sadece üyelerimiz görebilir.
Bu ifadeler ile sayfanın görünen en sol ve en üst noktalarının değerini elde ediyoruz. Aynı işlemi IE için ise :

Kod:
 Kodları sadece üyelerimiz görebilir.
Hazır..
 

Şuanda Bu Konuyu Görüntüleyenler (Kayıtlı: 0, Misafir: 3)

Üst