首页 > 代码库 > 获取文字相对于浏览器窗口的位置以及2个应用实现
获取文字相对于浏览器窗口的位置以及2个应用实现
首先放出Demo和效果截图
Demo1:用户输入喜欢文字定位并动画
http://runjs.cn/detail/cjrwtdgz
Demo2：搜索文字定位并动画
http://runjs.cn/detail/u9qqhmij
如果你对上面的实现感兴趣的话，下面就直接进入正题（简单介绍原理和所需前端技术，具体实现还是需要细看上面的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里的代码
而该功能更多的想法应用期待你去发掘
（博主暂时只想到文字方面的‘彩蛋’，也能和@功能的弹层位置扯上一点关系【和新浪的@位置获取类似】）
获取文字相对于浏览器窗口的位置以及2个应用实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。