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

核心提示： 点击方式跟触发方式的流程是差不多的，而且更简单，JavaScript教程:网页浮动定位提示效果(8)，这里就不重复了，元素定位：完成了显示隐藏， 使用时，把水平坐标和垂直坐标的标识值（字符）分别赋给触发对象的Align和vAlign属性，就到本程序另一个重点，元素定位

点击方式跟触发方式的流程是差不多的，而且更简单，这里就不重复了。

元素定位：

完成了显示隐藏，就到本程序另一个重点，元素定位。

程序包括这几个定位：预设定位，自定义定位，自适应定位。

而定位的最终效果是结合了这几个定位设置的效果，下面再一一分析。

预设定位和自定义定位：

预设定位的意思是使用程序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属性，系统就会自动设置对应的位置。