- 浏览: 1432954 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
我们常常需要获得某个元素在页面的绝对位置,比如:经常需要弹出一个绝对定位的 div 在特定位置,有时是在一个元素的周围,有时是在鼠标单击的地方,如果我们方便的获得了 想要的页面绝对位置,那么指定 top left 属性即可,很方便,偏偏在这方面 IE 与标准却达不成一致,需要总结一下,Extjs 就是现成的桥接工具,帮我们屏蔽了各个浏览器的差异。
主要是 两个地方:
Ext.Element.getXY()
该方法获得页面中某个元素边框开始(不包括边框)的左,上,右和下分别相对浏览器视窗(即不包括滚屏长度)的位置 ,和浏览器模式无关。
测试代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>窗口测试</title> <style type="text/css"> html,body{ margin:0; border:0; padding:0; } </style> </head> <body> <div id="q" style="border:1px solid red;padding:10px;margin:100px;width:600px;height:600px;position:relative;" > z <div id="demo" style="border:1px solid red;padding:10px;margin:100px;width:10px;height:10px;" > </div> </div> <script type="text/javascript"> alert(document.getElementById('demo').getBoundingClientRect().top - document.getElementById('q').getBoundingClientRect().top); </script> </body> </html>
获得一个页面元素的绝对页面位置。这个方法主要利用了 getBoundingClientRect (注意:IE 默认body有边框,而 firefox,chrome 则没有) 以及目前尚没有明确标准的offsetTop 以及 offsetParent,offsetTop 是指当前元素和他的包含块元素之间的高度差(详见:盒模型 )。这点 ie ff 表现得基本一致,差别很小见下。但是对于相对元素offsetParent 却有争议( 详见:offsetParent 探讨 )。
1.如果存在 getBoundingClientRect
Ext 的方法用了 约定俗称 的 :
if (el.getBoundingClientRect) { b = el.getBoundingClientRect(); scroll = fly(document).getScroll(); return [b.left + scroll.left, b.top + scroll.top]; }
2. 其它
offsetParent 就是当前元素的已定位的祖先元素(position属性不等于static),因此并不一定是父元素offsetTop 不包括当前元素的上边框ie,ff 都认为 body 没有 offsetParent。
于是粗略的讲,只要沿着 offsetParent 向上,累加 offsetTop 即可,Extjs正是这样做的,只不过对各个浏览器的细节进行了更多考虑,特别是当该元素的祖先元素们含有滚动条(overflow 不为 visible)时,要减去如:
//x,y 为根据 offsetTop offsetParent 方法 算出的 ,然后 while (p && p != bd) { if (!Ext.isOpera || (p.tagName != 'TR' && !fly(p).isStyle("display", "inline"))) { x -= p.scrollLeft; y -= p.scrollTop; } p = p.parentNode; }
x 坐标 同 y 坐标。
Ext.EventObject.getPageY()
这个表示 当前事件的发生绝对页面位置 , 只有 是鼠标事件时才有效,例如单击 , 鼠标经过等。
w3c 中 直接 规定 event.pageX 为 当前事件的发生绝对页面位置。
而ie 没有直接的获得方式,ie 专有的 event.clientX 为绝对可见位置,(忽略了向上滚动条),则我们只需要把滚动条条滚掉的页面高度加上即可。即页面向上滚动了多少?正是body.scrollTop 属性,意思也很明白
元素 :body
行为 :scroll
方向 :top
值 body.scrollTop
如果页面处于 w3c 标准模式:那么以上的 body 就要换做 document.documentElement 了,标准模式时这些属性都放在html节点上了。
下篇 简析 Ext.EventObject 的怎么阻止默认事件发生,以及传统的return false.
PS: KISSY 实现 与 iframe 内元素的考虑 :
考虑 iframe ,对其内的元素先求解在 iframe 的坐标,再递归向上求解 iframe element 在其包含的窗体中的坐标。
/** * support elment in iframe * @param elem * @param refDocument */ function getOffset(elem, refDocument) { var box, x = 0, y = 0, currentWindow = elem.ownerDocument.defaultView || elem.ownerDocument.parentWindow, currentDoc = elem.ownerDocument, currentDocElem = currentDoc.documentElement; // 1. 对于 body 和 docElem, 直接返回 0, 绝大部分情况下,这都不会有问题 // 2. 根据 GBS 最新数据,A-Grade Browsers 都已支持 getBoundingClientRect 方法,不用再考虑传统的实现方式 if (elem[GET_BOUNDING_CLIENT_RECT]) { if (elem !== currentDoc.body && currentDocElem !== elem) { box = elem[GET_BOUNDING_CLIENT_RECT](); // 注:jQuery 还考虑减去 docElem.clientLeft/clientTop // 但测试发现,这样反而会导致当 html 和 body 有边距/边框样式时,获取的值不正确 // 此外,ie6 会忽略 html 的 margin 值,幸运地是没有谁会去设置 html 的 margin x = box.left + _scrollLeft(currentWindow, currentDocElem, currentDoc); y = box.top + _scrollTop(currentWindow, currentDocElem, currentDoc); } if (refDocument) { var refWindow = refDocument.defaultView || refDocument.parentWindow; if (currentWindow != refWindow && currentWindow.frameElement) { //note:when iframe is static ,still some mistake var iframePosition = DOM.offset(currentWindow.frameElement, refDocument); x += iframePosition.left; y += iframePosition.top; } } } return { left: x, top: y }; }
PS2 : 设置页面绝对位置的探讨
发表评论
-
模块化高扩展性的前端框架 KISSY
2013-03-14 14:58 8545模块化高扩展性的前端框架 KISSY 注:本文为 2 ... -
构建前端 DSL
2012-10-11 22:10 5282目前在传统的软件开 ... -
KISSY kisses bootstrap navbar
2012-08-03 01:12 5953看了下 bootstrap 的导航菜单,立刻非常喜欢,注意是浅 ... -
promise api 与应用场景
2012-02-07 17:34 7284promise 是 commonjs 社区中提出的异步规范,其 ... -
unified event model
2011-10-14 23:02 1745为了处理原生事件在各 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2784简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2787场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2199分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6937作为前端开放的基础安全保证,caja 是目前比较合 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2410这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
just another event model
2011-06-08 20:47 2126事件模型也算是客户端兼容性的一个长期问题,早期 jquery ... -
框架 build 系统介绍
2010-07-11 01:29 1588一个复杂的类库通常都包括很多子模块( jquery@git ... -
querySelectorAll 探讨
2010-07-01 22:35 4418随着css selector engine在越来越多的java ... -
再谈 attribute
2010-06-22 11:37 2564@slideshare 原生: ... -
事件机制探讨
2010-06-21 13:54 2176由于浏览器事件机制的不兼容性,譬如最常见的注册事件差异 ... -
利用Attribute重构:业务与UI分离
2010-06-08 16:54 1537很简单的一个应用 通过按钮来限制输入范围 ,这样的话再 ... -
yui3 loader的串行加载特性
2010-06-04 12:30 1767yui3 的沙箱机制可以在 ... -
yui3下的load事件触发
2010-06-01 13:31 3159以前的一些总结:页面l ... -
理解YUI3 extension:Base.create
2010-05-31 03:01 1956YUI3中为了避免不必要的类继承层次,以及摆脱利用原型链模拟的 ... -
google WebFont Loader 源码阅读
2010-05-22 01:04 2712资料: 关于新发 ...
相关推荐
NULL 博文链接:https://mutongwu.iteye.com/blog/1425322
主要获取鼠标在页面上的位置,包括当页面有滚动条的时候。。
页面跳转问题页面跳转问题页面跳转问题页面跳转问题页面跳转问题页面跳转问题页面跳转问题页面跳转问题页面跳转问题
一款可以定位页面位置的
jQuery获得页面元素的绝对X,Y坐标,可以用offset()方法,下面有个不错的坐标大家可以参考下
在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧。 本文会详述各种获取 DOM 元素绝对...
今天我们要实现的效果是:当点击菜单项时,可以平滑地滚动到对应指定的位置。 更详细jQuery平滑滚动到页面指定位置教程
保持页面滚动条位置的javascript代码
本文实例讲述了jQuery获取页面元素绝对与相对位置的方法。分享给大家供大家参考。具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset...
指定页面定位位置 在html中指定 方便好用
本文实例讲述了JavaScript获得当前网页来源页面(即上一页)的方法。分享给大家供大家参考。具体如下: 下面的JS代码通过document.referrer获得来源页面地址 <!DOCTYPE html> <html> <body> The ...
获取对象在整个页面的位置获取对象在整个页面的位置获取对象在整个页面的位置
NULL 博文链接:https://lijun0349-163-com.iteye.com/blog/2008680
jquery页面位置定位导航.rarjquery页面位置定位导航.rarjquery页面位置定位导航.rarjquery页面位置定位导航.rarjquery页面位置定位导航.rarjquery页面位置定位导航.rar
此款贪吃蛇是我们网页设计课程的期中作业,页面保证精美,带三种不同的模式,不穿墙不加速的普通模式,穿墙稍加速的模式和不穿墙极速模式。
vue使用keep-alive切换页面,2种方法实现页面保持滚动位置 下载后 先 npm i 安装依赖
HTML在页面上滚动滚轮滚动到指定的位置停 滚动到指定位置就不让滚了 滚动到指定位置就不能滚了
react-ReactScrollTo一个React组件可以帮助滚动页面至指定位置
js 特效 html 特效 链接到页面指定位置 js 特效 html 特效 链接到页面指定位置
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly...