<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标跟踪</title>
<style type=text/css>
.mystyle {
       COLOR:red;
       FONT-FAMILY:宋体;
       FONT-SIZE:20pt;
       POSITION:absolute;
       TOP:100px;
       WIDTH:200px;
       Z-INDEX:50;
       VISIBILITY:visible
}
</style>
<script language="JavaScript">
<!--
   var x,y;
   var flag=0;   function MouseMove(){
     x=document.body.scrollLeft+event.clientX;
   //获取当前鼠标位置的X坐标
     x=document.body.scrollTop+event.clientY;
   //获取当前鼠标位置的Y坐标
     flag=1;
   }
   function SetPos(){
   if(flag==1){
   //当鼠标移动时,重新设置图层位置
   divl.style.posLeft=x+20;
   //设置图层位置的X坐标
   divl.style.posTOP=y;
   //设置图层位置的Y坐标
   }
   代码1
   //每100ms刷新图层位置坐标
   }
-->
</script>
</head>
<body onload="代码2"  onmousemove="MouseMove()">
<div id="divl" class="mystyle">
鼠标跟踪演示
</div>
</body>
</html>

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>鼠标跟踪</title>
    <style type=text/css>
    body {width:100%;height:1000px}
    .mystyle {
      COLOR:red;
      FONT-FAMILY:宋体;
      FONT-SIZE:20pt;
      POSITION:absolute;
      TOP:100px;
      WIDTH:200px;
      Z-INDEX:50;
      VISIBILITY:visible
    }
    </style>
    <script language="JavaScript">
    <!--
      var x,y;
      var flag=0;  function MouseMove(){
      x=document.body.scrollLeft+event.clientX;
      //获取当前鼠标位置的X坐标
      y=document.body.scrollTop+event.clientY;
      //获取当前鼠标位置的Y坐标
      flag=1;
      SetPos();
      }
      function SetPos(){
      if(flag==1){
      //当鼠标移动时,重新设置图层位置
      //divl.style.posLeft=x+20;
      //设置图层位置的X坐标
      //divl.style.posTOP=y;
      //设置图层位置的Y坐标
      var $o=document.getElementById('divl');
      $o.style.top=y+20;
      $o.style.left=x+10;
      }
      //代码1
      //每100ms刷新图层位置坐标
      }
    -->
    </script>
    </head>
    <body onmousemove="MouseMove()">
    <div id="divl" class="mystyle">
    鼠标跟踪演示
    </div>
    </body>
    </html>