获取文字相对于浏览器窗口的位置以及2个应用实现
2014-09-24 10:21
302 查看
首先放出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里的代码
而该功能更多的想法应用期待你去发掘
(博主暂时只想到文字方面的‘彩蛋’,也能和@功能的弹层位置扯上一点关系【和新浪的@位置获取类似】)
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里的代码
而该功能更多的想法应用期待你去发掘
(博主暂时只想到文字方面的‘彩蛋’,也能和@功能的弹层位置扯上一点关系【和新浪的@位置获取类似】)
相关文章推荐
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- js获取元素相对窗口位置的实现代码
- [转载]js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- MFC如何获取控件相对于窗口的左边,以及鼠标相对于控件的位置
- 获取浏览器窗口相对于屏幕的位置,获取可视窗口的宽高、元素的样式或伪元素的样式
- js获取元素相对窗口位置的实现代码
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- 获取定位元素相对于浏览器窗口的绝对位置
- 获取控件在窗口上的相对位置以及修改背景色
- 获取浏览器窗口大小以及位置
- 【Android应用开发详解】第01期:第三方授权认证(一)实现第三方授权登录、分享以及获取用户资料
- WPF中获取TreeView以及ListView获取其本身滚动条的方法,可实现自行调节scoll滚动的位置
- 获取鼠标在div中的相对位置的实现代码
- 【Android应用开发详解】第01期:第三方授权认证(一)实现第三方授权登录、分享以及获取用户资料
- js获取控件位置以及不同浏览器中的差别介绍
- 实现DIV相对于浏览器固定位置不变
- GUI剖析之 获取屏保控制窗口显示模式的实现(屏保应用)
- JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)