cursor based movement

by techsin

HTML

<img id='m' src="http://exchangedownloads.smarttech.com/public/content/b0/b0259c9a-2b8f-4c5a-b114-b9a34d85690d/previews/medium/0001.png" alt="">
<img id='c' src="http://therealmanslist.files.wordpress.com/2011/03/5602645-black-arrow-pointing-up-on-a-yellow-road-sign.jpg" height="50px" alt="">

CSS

img{
    display: inline-block;
    position: absolute; top: 50%; left: 50%; margin-left:-210px; margin-top:-157.5px;
}
#c{  margin-left:-25px; margin-top:-25px; }

body,html {width: 100%; height: 100%; overflow: hidden;}

JavaScript

var b=$("#m"),c=$("#c"),d=c.offset().left+25,e=c.offset().top+25,f,g,h,k,n,p=5,q={};f=g=h=k=n=0;$(document).on("mousemove",r).on("keydown",s).on("keyup",t);function t(a){q[a.which]=!1}function s(a){q[a.which]||(q[a.which]=!0)}setInterval(u,16);
function u(){function a(a){n-=a*Math.cos(Math.PI/180*h)*p;k+=a*Math.sin(Math.PI/180*h)*p}function l(a){n-=a*Math.cos(Math.PI/180*(h+90))*p;k+=a*Math.sin(Math.PI/180*(h+90))*p}for(var m in q)if(!0==q[m])switch(+m){case 38:a(1);break;case 40:a(-1);break;case 39:l(1);break;case 37:l(-1)}b.css("-webkit-transform","translate("+k+"px,"+n+"px)")}function r(a){f=a.pageX-d;g=-(a.pageY-e);h=180*Math.atan(f/g)/Math.PI;0>=g?h+=180:0>=f&&0<=g&&(h+=360);c.css("-webkit-transform","rotateZ("+h+"deg)")};