当前位置: 主页 > 网页制作 > Javascript > 浮动定位和鼠标跟随的tooltips效果

浮动定位和鼠标跟随的tooltips效果

时间:2009-12-18来源:互联网 点击:

元素定位

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

预设定位和自定义定位

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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。

 

站长资讯网
.
分页: [1] [2] [3] [4] [5] [6]
TAG: 浮动定位 鼠标跟随
推荐内容最近更新人气排行
关于我们 | 友情链接 | 网址推荐 | 常用资讯 | 网站地图 | RSS | 留言