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;
|
1 2 3 |
<link href="css/style.css" rel="stylesheet"> |
|
1 2 3 4 |
<script src="javaScript/jquery/jquery-3.1.1.js"></script> <script src="javaScript/script.js"></script> |
HTML: İlk olarak sağa ve sola ilerletmek için çalışma dosyamıza iki buton oluşturuyoruz. İlerleteceğimiz resmi de ekliyoruz.
|
1 2 3 4 5 6 |
<button id="sol">Sol</button> <button id="sag">Sağ</button> <img id="resim" src="img/img1.jpeg" width="250px"> |
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.
|
1 2 3 4 5 6 7 8 |
img { position: absolute; margin-top: 10px; display: block; } |
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;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function(){ var x = 0; $("#sol").click(function(){ x=x-10; $("#resim").css("left",x+"px"); }); $("#sag").click(function(){ x=x+10; $("#resim").css("left",x+"px"); }); }); |
[…] Jquery Resim Kaydırma […]