move a div with key press - add bg image

move a div with key press - add bg image

by Chandana Thota

HTML

<!--move a div with  key press - add bg image -->
<div id="box"></div>

CSS

#box {
    position:absolute;
    width:100px; height:100px;          
    background-color:black;
    background-image:url('http://i2.kym-cdn.com/entries/icons/square/000/000/005/pedobear.jpg');
background-repeat:no-repeat;
}

JavaScript

$(document).keydown(function(pk){
var pos = $('#box').position();
  
  if(pk.keyCode == '37')
  {
      $('#box').css('left',pos.left - 5 + 'px');
  }
    if(pk.keyCode == '38')
  {      
     $('#box').css('top',pos.top - 5 +'px');
  }
    if(pk.keyCode == '39')
  {
           $('#box').css('left',pos.left + 5 + 'px');
  }
    if(pk.keyCode == '40')
  {
         $('#box').css('top',pos.top + 5 + 'px');
  }

  });