JavaScript教程:网页浮动定位提示效果

核心提示： 例如要设置位置14，那么Align设为"clientright"，JavaScript教程:网页浮动定位提示效果(9)，vAlign设为"center"就可以了， 至于自定义定位就是在预设定位得到的坐标基础上， 理想的效果是能自动从25个预设定位中找

例如要设置位置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。

自适应定位：

自适应定位的作用是当Tip显示的范围超过浏览器可视范围的时候，自动修正到可视范围里面。

因为上面通过getBoundingClientRect获取的定位是以视窗为准的，所以可以直接通过clientWidth/clientHeight来判断是否超过视窗范围。

首先获取最大left和top值：

var maxLeft = this._doc.clientWidth - this.Tip.offsetWidth,
　　　 maxTop = this._doc.clientHeight - this.Tip.offsetHeight;

最小值是0就不用计算了。

如果Reset属性是true会使用重新定位的方法。

理想的效果是能自动从25个预设定位中找到适合的定位位置。

但这个需求实在变化太多，要全部实现估计要长长的代码，程序仅仅做了简单的修正：

if (iLeft > maxLeft || iLeft < 0) {
　　　 iLeft = this.GetLeft(rect, 2 * iLeft > maxLeft ? "left" : "right") + customLeft;
};　　　
if (iTop > maxTop || iTop < 0) {
　　　 iTop = this.GetTop(rect, 2 * iTop > maxTop ? "top" : "bottom") + customTop;
};