内容跟着鼠标跑

秒速五厘米 2022-08-03 14:58 169阅读 0赞

不要看只有短短的20多行代码，却包括了HTML+css+div+javascript，

其核心技术是一个鼠标事件：mousemove

示例是一张图片跟着鼠标移动，代码如下：

<table style="widows:auto"> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;head&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;title&gt;无标题文档&lt;/title&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;style&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>#layer{position:absolute;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>}</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;/style&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;script&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>function move(){ </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var obj = document.getElementById("layer");</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>obj.style.left=event.clientX+"px";</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>obj.style.top=event.clientY+"px";</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>}</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>document.οnmοusemοve=move;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;/script&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;/head&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;body&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;div id="layer" style="left:10px;" style="top:10px"&gt;&lt;img src="<a rel="nofollow">img/doubi.gif</a>"&gt;&lt;br/&gt;奔跑吧，逗比！！！&lt;/div&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;/body&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;/html&gt;</td> 
  </tr> 
 </tbody> 
</table>

代码下载：http://pan.baidu.com/s/1c0wJEoS