Perşembe , 19 Ekim 2017
Anasayfa » JavaScript » JQuery İle Resim Kaydırma

JQuery İle Resim Kaydırma

Bu örneğimizde JQuery ile butona tıklandığında resmin hareket etmesini sağlayacağız.
İlk olarak JQuery’nin sitesinden JQuery dosyalarını indiriyoruz. Css ve JavaScript dosyalarını açarak çalışma dosyamıza bağlıyoruz.
Ağaç yapısı şu şekilde olacaktır;

HTML: İlk olarak sağa ve sola ilerletmek için çalışma dosyamıza iki buton oluşturuyoruz. İlerleteceğimiz resmi de ekliyoruz.

CSS: Resmi ‘display’ ile ‘block’ nesnesi yaparak butonların altına indiriyoruz. Daha sonra ‘position:absolute’ ile sayfadan ayırıyoruz. Böylece sayfa içerisinde hareket edebilecek. Butonlara yapışmasını istemediğim için resme margin-top (üst boşluk) veriyoruz.

JQuery: JQuery kodlarının sayfa yüklendikten sonra çalışmasını sağlamak için ‘.ready’ olayını kullanıyoruz. Bu sayfanın yüklenme süresinin uzamasını önleyecektir.
İlk olarak resmin yerini ayarlamak için bir değişken atıyoruz. Varolduğu yeri 0(sıfır) olarak ayarlamış olduk. Artık sağa veya sola kaydırırken bu noktaya göre hareket edecek.

Daha sonra oluşturduğumuz butonlara tıklama olaylarını atıyoruz. Tıklandığında ayarladığımız noktadan 10px sağa veya sola kaymasını sağlamak için tıklama fonksiyonunun içerisine değer atamalarını yapıyoruz. Örneğin Sağ butonuna tıklandığında değişkenin içerisine 10px değeri atanacak ve sağa doğru 10px’lik bir hareketi olacak. Yer değiştirmesi için de bu değişkeni css’e aktarmamız gerekiyor. Yani butonların tıklama,atama ve css’e aktarma olaylarını şu şekilde yapıyoruz;

Hakkında Sinem ÇİMEN

İlginizi Çekebilir

JavaScript for … of Kullanımı

for of deyimi tekrar eden (iterable) nesneler üzerinde hareket ederek nesnenin değerini okumak için kullanılan …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir