实现效果就大概下面的图上的感觉了

//css设置样式，设置定位，让其能够移动起来
<style>
	html,body{
		width: 100%;
		height: 100%;
	}
	*{
		margin: 0;
		padding: 0;
	}
	#big{
			width: 100%;
			height: 100%;
			position: relative;
	}
	.small{
			position: absolute;
			height: 20px;
			width: 20px;
			border:3px solid pink;
			border-radius: 50%;
		}
</style>

	<div id="big"></div>
<script>
			//获取div
			var big = document.getElementById("big");
			//对div添加鼠标移动时间
			big.onmousemove=function(e){
			//对event做兼容性处理
			var e = event || window.event;
			//创建一个新的div
			var div = document.createElement("div");
			//新的div的样式为.small
			div.className="small";
			//获取鼠标移动的X轴坐标（想知道clientX与screenX等等的区别，请参考我上一篇博客），将获取的X轴坐标给新创建div的绝对定位的left
			div.style.left = e.clientX +'px';
			//简单来说就是把clientY的值给top，让新的div与上面的距离与鼠标位置保持一致
			div.style.top = e.clientY +'px';
			//条件添加好了，就把创建好的div加到之前的div里面
			big.appendChild(div);
			//定义一个i和timer
			var i=0;
			var timer = null;
			//定时器
			timer= setInterval(function(){
			//每一次移动，就改变相应的属性
				i+=5;
				div.style.opacity = (50 - i)/50;
				div.style.width = (20+i) +'px';
				div.style.height = (20+i) +'px';
			},20)
			//在300ms后执行，并清除计时器，删除创建的div
			setTimeout(function(){
				clearInterval(timer)
				big.removeChild(div)
			},300)
	}
	//每执行一次移动，都会触发计时器和延迟执行
</script>