jQuery ile Nesneleri Hareket Ettirelim

Bu konumuzda Javascript ile jQuery ve CSS kullanarak elimden geldiğince nesne hareket ettirme konusunu anlatacağım.Öncelikle vereceğim kodları anlamanız için az buçuk CSS ve jQuery’den anlamanız gerekli. Çok basit bir şeklini anlatacağım,biraz inceledikten ve araştırdıktan sonra bilmeyenlerde mantığını anlayabilecektir.

Konumuza dönelim ve “div” dediğimiz nesneleri oluşturalım :

<div id=”nesne” style=”position: absolute; width: 50px; height: 50px; top: 100px; left: 100px; background: #000;”></div>

Ve şimdide jQuery kütüphanesini çağıralım :

<script src=’jquery.js’></script>

Son olarak jQuery fonksiyonu ;

<script type=”text/javascript”>
var x = 100, y = 100;
$(document).ready(function(){
}).keydown(function(event)
{
var tus = new Array(37, 38, 39, 40);
var kod = (event.which) ? event.which : event.keyCode;

var tus = new Array(37, 38, 39, 40);
var kod = (event.which) ? event.which : event.keyCode;
if(kod == tus[0]){ if(x > 3) { x = x – 3; $(“#nesne”).css(“left”, x+”px”)}}
if(kod== tus[1]){ if(y > 3){ y = y – 3; $(“#nesne”).css(“top”, y+”px”);}}
if(kod== tus[2]){ x = x + 3; $(“#nesne”).css(“left”, x+”px”);}
if(kod== tus[3]){ y = y + 3; $(“#nesne”).css(“top”, y+”px”);}
});
/* Nazım Mert Bilgi – http://nazimmertbilgi.com */
</script>

Posted by Nazim Mert Bilgi

Adım Nazım Mert, soyadım ise Bilgi. 98 yılında Karaman'da doğdum, 2011 yılından itibaren Antalya'da ikâmet ediyorum. Yazılım ilmine olan merakımı 2013'de fealiyyete geçirdim ve 2015 yılı yazında Bilge Adam Akademi'den "Üstün Başarı" ve "Microsoft Certified Solution Developer" ünvanıyla mezun oldum. 2011 yılından itibaren ise, siz değerli ziyaretçilerimi en iyi içeriği sunabilmek için, bu blog'da bazı gözlemlerimi ve bazı ilimleri paylaşıyorum.

3 thoughts on “jQuery ile Nesneleri Hareket Ettirelim”

  1. Başlıga bak gelen aramalara bak 😀
    en güzel kız odalu
    masa üstü kitaplık modelleri
    3 ranza modelleri ve fiyatları
    çift yataklı DOLAPLI GENÇ ODALARI
    takı dolabları

Comments are closed.