Javascript ve CSS ile dönen kareler yapımı

Javascript ve CSS kullanarak üzerine gelince dönen kareler yapımını anlatmaya çalışacağım. Aşağıda uygulamanın tamamlanmış hali mevcut. İmleç ile üzerinde gezindirdikçe karelerin renkleri değişecek.

Öncelikle body’nin içerisine kareler id’li bir div eklememiz gerekiyor.
<div id=”kareler”></div>

Daha sonra javascript kodlarını harici bir js dosyasına ya da html’de script tag’ının içine yerleştirebilirsiniz. Js kodları şu şekilde:

 

 

Javascript kodunu(script tag’ını) oluşturduğumuz div’in altına eklemeniz gerekiyor. Div’den önce eklerseniz hata verecektir. Kodların çoğunda ne yapıldığıyla ilgili açıklama eklemeye çalıştım. Burada

 

str+=”<div class=’box’ style=’left:”+posx+”px;top:”+posy+”px’></div>”

 

kısmı yerine createElement de kullanabilirdik ancak kod fazla karışık olmadığı için ve obje eklemenin en kolay yolu innerHTML olduğu için bu yöntemi tercih ettim. Ayrıca her bir objeyi ayrı ayrı innerHTML koduyla eklemek yerine tek seferde eklemek performans açısından daha iyidir. Bu sebeple önce bütün objeleri str isimli bir değişkene ekleyip sonrasında kareler div’imize ekledim.

 

CSS kısmı ise şöyle:

CSS kısmına henüz yorum ekleyemedim, en kısa zamanda onu da eklemeye çalışırım.

Bir cevap yazın

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