<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<title></title>
<style>
#foo{width:50px; height:50px; border-radius:50px; background-color:#F00; position:absolute; top:0; left:0; -webkit-transition:all 1s;}
</style>
</head>
<body>
<div id="foo"></div>
<script>
var f = document.getElementById('foo');
document.addEventListener('click',function(ev){
f.style.left = (ev.clientX-25)+"px";
f.style.top = (ev.clientY-25)+"px";
},false);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<title></title>
<style>
#foo{width:50px; height:50px; border-radius:50px; background-color:#F00; position:absolute; top:0; left:0; -webkit-transition:all 1s;}
</style>
</head>
<body>
<div id="foo"></div>
<script>
var f = document.getElementById('foo');
document.addEventListener('click',function(ev){
f.style.left = (ev.clientX-25)+"px";
f.style.top = (ev.clientY-25)+"px";
},false);
</script>
</body>
</html>