鼠标悬停层，兼容Firefox
2005-08-14 15:24 | aptx
很久没在这里干正经事了~~
鼠标悬停层的应用应该很广了，比如BTCHINA、贪婪大陆，上面的种子链接只要鼠标移上去，就会冒出个注释来，鼠标移开，注释消失。
悬停层的原理其实很简单，比如偶写的这个，每个链接onMouseOver事件是让层显示，并且让层的初始坐标等于鼠标的坐标，层的内容也由onMouseOver事件决定。onMouseOut则是让这个层隐藏。
原理清楚了，往下就是细节的处理了。如果亲自动手实践的话，一定会遇到这两个问题：
一、悬停层里可能会有文字链接，如果仅仅是鼠标移开触发点层就消失，这些链接就不能点了。所以必须做到当鼠标移到层上的时候（这里必须有一个时间延迟，保证鼠标有时间移到层上），层便不能消失。移开该层，层消失。
要想实现上述想法，必须做到如下两点：
1、隐藏悬停层的那个函数，必须有一个时间延迟。翻翻MSDN，很快就找到window.setTimeout()和window.clearTimeout()（用法请自行查找）。
2、悬停层也得加上onMouseOver和onMouseOut事件，其中onMouseOver是取消文字链接的那个时间延迟事件，即window.clearTimeout()。onMouseOut则是再设定一个时间延迟事件，通常直接等于文字链接的那个onMouseOut事件就可以了。
二、又是该死的IE的渣方言问题。Firefox有个pageX/pageY属性，我们可以很直观获得鼠标触发事件的页面坐标。但是到了IE就不行了，必须用clientX加上滚动条滚动的距离，即document.body.scrollLeft+evt.clientX+"px";。更为可恶的是当页面加上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
声明时，document.body.scrollLeft的值竟然成了零，这时就必须使用document.documentElement.scrollLeft（这个问题曾经困了我两天，后来在一个国外的网站上找到了原因和解决办法）。同理，如果没了这个声明，又得使用document.body.scrollLeft。考啊，原来光给IE6写脚本也得考虑兼容性.....
下面是这个悬浮层的特点，打开这个js文件，开始几行就应该能看见
var strName="かぶそ|蛙神|白娘子|鬼火|水虎|河童|犬蠱|閻羅王-比叡|麗々";
trs.arrJpName = strName.split("|");
strName="1-10|1-09|1-08|1-07|1-06-2|1-06-1|1-05|1-04|1-03";
trs.arrEnName = strName.split("|");
这几句的目的是做一个人名与图片文件名的对照表，trs.applyTransform()是用来负责提取文字链接里的文字，然后根据这个对照表，提取出相应图片的文件名，并拼合成URL及相应的悬浮层内的html。
当初之所以这么做，其实是有感于日文攻略或小说里的人名问题。当一个日文游戏的攻略有很多人物时（比如TRS），那些陌生的日文名便成了偶理解这篇攻略的最大障碍。但是如果运用此法，即当鼠标指向这些日文名时便能显示该人物的头像，那么记不住日文名的问题即可迎刃而解。此文所使用的示例是兔子的影之心攻略里的几个小BOSS，当鼠标指向名字时即可显示该BOSS的肖像，可以说这就是偶写这个脚本的初衷了