鼠标跟随特效

鼠标跟随

鼠标跟随效果，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动

代码

<style>
	  body{
	  		height:5000px;
	  		}
      div{width:50px; height:50px; background:red; border-radius:50%; position:absolute;}
</style>

js 代码

<script>
      window.onload = function(){
		   var body = document.body;
		   var fragment = document.createDocumentFragment();
	       for(var i = 0;i <10;i++){
		      var oDiv = document.createElement("div");
			  fragment.appendChild(oDiv);
		   }
		   body.appendChild(fragment);
		   body.onmousemove = function(evt){
		       var e = evt || window.event;
			   
			   var oBox = document.getElementsByTagName("div");
			   
			   function gen(obj,s){
					setTimeout(function(){
					  obj.style.left = e.pageX + "px";
					  obj.style.top = e.pageY + "px";
				   },s)
			   };
			   /*
			   gen(oBox[0],100);
			   gen(oBox[1],200);
			   gen(oBox[2],300);
			   gen(oBox[3],400);
			   gen(oBox[4],500);
			   gen(oBox[5],600);
			   gen(oBox[6],700);
			   gen(oBox[7],800);
			   gen(oBox[8],900);
			   gen(oBox[9],1000);
			   */
			   for(var k = 0;k < 10;k ++){
				gen(oBox[k],(k + 1) * 100);
			   }
			  
		   }
	  };
</script>