1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>跟随鼠标移动实例</title> 6 <style type="text/css"> 7 body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,pre,form,input,button{margin:0; padding:0;} 8 table{border-collapse:collapse;border-spacing:0;} 9 h2{font-size:14px;} 10 ul,ol{list-style:none;} 11 body{font-size:14px;/*320px;*/margin:0 auto;color:#6c6c6c; font-family:"微软雅黑",Helvetica;} 12 fieldset,img{border:0;} 13 img{/*vertical-align:middle;*/} 14 input,textarea{ border:none 0;} 15 a{text-decoration:none; color:#666;} 16 .box{position:absolute;width:100px; height:50px; } 17 .span{width:10px; height:10px; background:#CCCCCC;position:absolute;} 18 </style> 19 </head> 20 <body> 21 <div class="box"></div> 22 <div class="span"></div> 23 </body> 24 <script type="text/javascript" src="js/jquery-1.4.2.min.js" >//需要加入JQ</script> 25 <script language="javascript" type="text/javascript"> 26 $(function(){ 27 $(document).mousemove(function(e){ 28 a=e.pageX; 29 b=e.pageY; 30 $(".box").text(a+" "+b) 31 $(".span").animate({left:(e.pageX-10)+"px",top:(e.pageY-10)+"px"},0.000001) 32 }) 33 }) 34 </script> 35 </html>