<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
document.onmouseover = function(){
document.onmousemove = function( ev ){
ev = ev || event;
var div = document.createElement('div');
div.style.width = '5px';
div.style.height = '5px';
div.style.position = 'absolute';
div.style.left = ev.clientX+'px';
div.style.top = ev.clientY + 'px';
if(ev.clientX<300){
div.style.background = 'red';
div.style.width = '6px';
div.style.height = '6px';
}else if(ev.clientX<600){
div.style.background = 'green';
div.style.width = '7px';
div.style.height = '7px';
}else if(ev.clientX<900){
div.style.background = 'yellow';
div.style.width = '8px';
div.style.height = '8px';
}else{
div.style.background = 'orange';
div.style.width = '9px';
div.style.height = '9px';
}
document.body.appendChild(div)
}
}
</script>
</body>
</html>