元素定位：

完成了显示隐藏，就到本程序另一个重点，元素定位。
程序包括这几个定位：预设定位，自定义定位，自适应定位。
而定位的最终效果是结合了这几个定位设置的效果，下面再一一分析。

预设定位和自定义定位：

预设定位的意思是使用程序25个预设位置来定位。
25个位置是怎么来的呢？看下面的演示

其中黑色框代表触发元素，红色框代表Tip。
一眼望去，要实现这么多的位置好像很复杂，这时要想找到最好的方法就要细心分析找出规律。
这25个位置其实都是由5个水平坐标和5个垂直坐标组合而来的，只要计算好这10个坐标，就能组合出这25个位置来了。
其中1，2，3，4，5代表的水平坐标，程序分别用left，clientleft，center，clientright，right来标识。
而1，6，11，16，21代表的垂直坐标，程序分别用top，clienttop，center，clientbottom，bottom来标识。
ps：词穷，只好加个client来充数。

下面说说如何获取这些坐标的值，首先通过getBoundingClientRect要获取触发元素的坐标对象。
ps：关于getBoundingClientRect的介绍请看 这里的元素位置。
再利用这个坐标对像，通过GetLeft和GetTop来获取水平和垂直坐标。
GetLeft和GetTop里面都是些简单的获取坐标算法，具体请参考代码。

使用时，把水平坐标和垂直坐标的标识值（字符）分别赋给触发对象的Align和vAlign属性，系统就会自动设置对应的位置。
例如要设置位置14，那么Align设为"clientright"，vAlign设为"center"就可以了。

至于自定义定位就是在预设定位得到的坐标基础上，根据Custom（形式如{ left: 50, top: -10 }）的设置再进行left和top的修正。
自定义百分比定位是以触发元素的宽和高为基准，取百分比：

if (trigger.Percent.left) { iLeft += .01 * trigger.Percent.left * trigger.Elem.offsetWidth; };
if (trigger.Percent.top) { iTop += .01 * trigger.Percent.top * trigger.Elem.offsetHeight; };

注意数值单位是0.01。

出处：蓝色理想
责任编辑：bluehearts

上一页 JavaScript 浮动定位提示效果 [4] 下一页 JavaScript 浮动定位提示效果 [6]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。