跟随鼠标移动实例

 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>