获取文字相对于浏览器窗口的位置以及2个应用实现

首先放出Demo和效果截图

如果你对上面的实现感兴趣的话，下面就直接进入正题（简单介绍原理和所需前端技术，具体实现还是需要细看上面的Demo）

适用场景：作为一个前端彩蛋。

比如：当用户在输入“喜欢”时，跳 出个“爱心动画”，用户应该会感到惊喜；用户在读取私信的时，也看到一个“爱心动画”，也应该会感到惊喜。

原理很简单就5个步骤，而相对应的技术也很简单

开始前提：需要知道 _wrap中字符串（12345678912抓住145874）中‘ 抓住’的位置

第一步：新建一个节点 div2，然后把 _wrap的宽高等css样式复制给 div2

使用 window.getComputedStyle( _wrap ,null)来获得css样式，对于低版本IE，使用 _wrap .currentStyle来替代

第二步：复制截断的文字内容，添加标识节点 span，并塞入到body中

_setText 是字符串 '12345678912抓住'

第三步：计算 span在 div2中的偏移量

使用 offsetTop和 offsetLeft获取间距

第四步： 计算 _wrap 在浏览器中的位置

使用 _wrap.getBoundingClientRect() 获得4个边距离浏览器左侧和顶部的距离

至于 getBoundingClientRect ，该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，请 看下面图例

第五步：把3、4步所得相加就是位子“抓住”在浏览器中的位置

到这里，功能原理介绍已经结束，本篇文章也要结束了

至于怎么获取截断的文字字符串和获取文字位置后进行动画效果，请看最上方Demo里的代码

而该功能更多的想法应用期待你去发掘