Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     jquery ile klavye yön tusları kullanılarak nesne hareketi
     gürcü     19.01.2014     20:37:17

Bu uygulamada, Div etiketi ile oluşturulumuş bir kutu içerisine döşenmiş olan bir resmi, klavye yön tuşları ile hareket ettireceğiz. Bunun için div etiketine uygulanan style özelliklerine background-image özelliği ile resmi yerleştiriyoruz. div nesnesinin konumlanma özelliğini, position : absolute yaparak, nesnenin konumlanmasını istediğimiz koordinatlarda gerçekleştiriyoruz. Yazımızın detayında yer alan kodları html uzantısı ile kaydedip deneyiniz. Klavye yön tuşları ile nesnenin hareket ettiğini göreceksiniz. 



<html>
<head>
<style>
#kutu {
width:100px;
height:100px;
background-image: url("e.jpg");
position:absolute;
left:300px; 
top:150px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<body>
  <div id="kutu"></div>
<script>
var x =$(’#kutu’).offset().left;
var y =$(’#kutu’).offset().top;
$(document).keydown(function(event){
var code = (event.which) ? event.which: event.keyCode;
if(code==37)
{
x-=5; $("#kutu").css("left", x+"px");
}
                if(code==38)
{
y-=5; $("#kutu").css("top", y+"px");
}
 
                if(code==39)
{
x+=5; $("#kutu").css("left", x+"px");
}
    if(code==40)
{
y+=5; $("#kutu").css("top", y+"px");
}
});
</script>
</body>
</html>

Facebook'ta Paylaş    
Diğer AJAX İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...