得到目标元素距离视口的距离以及元素自身的宽度与高度（用于浮层位置的动态改变）...

以前所有操作都用弹窗弹个小层出来，然后最近整体换成了气泡风格，点哪里操作浮层就出现在哪里。我采用的是共用一个操作浮层，随元素位置而变换浮层的位置。

 

思路大概就是如下：

第一：确定浮层基于哪个元素定位

第二：根据目标元素的位置确定浮层的位置。

浮层的left值 = 整个元素的宽+然后得到元素左边距离视口的距离；

浮层的top值 = 元素上边距离视口的距离 - (或者+) 要微调的距离

（在例子里浮层左边的三角形要对齐点击的文字,所以要减去部分高度，因此具体的距离要自己根据需求微调）

我采用的调试方法是直接把浮层的top值先设为0，查看浮层的top值与元素的top值的关系，再来决定要微调的距离是什么

那怎么得到元素距离视口的距离呢，就是getBoundingClientRect方法。

element.getBoundingClientRect()会返回元素的高和宽以及元素本身的上下左右距离视口的距离;

 

补充一点：当页面目标元素可能会因为整个页面的滚动而改变位置时，浮层的高度或者宽度加上页面滚动的距离即可。

与这个方法相关的一些兼容什么的在MSDN上有更详尽的解释：

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

在这篇文章中，利用这个方法完成了页面内容跳转的功能。（即点击小标题，就跳转对对应的标题部分）

http://www.cnblogs.com/xxcanghai/p/5015712.html

转载于:https://www.cnblogs.com/coconutGirl/p/7505471.html