一。获取元素可以方便我们来计算元素怎么摆放的问题。
offset: 获取匹配元素在当前视口的相对偏移。也就是当前元素到页面顶部的距离。
position: 获取匹配元素相对父元素的偏移。
scrollTop: 获取匹配元素相对滚动条顶部的偏移。
scrollLeft: 获取匹配元素相对滚动条左侧的偏移。
window.pageXOffset:表示浏览器X轴(水平)滚动条的偏移距离。(兼容:ie9/10、chrome、firefox)
window.pageYOffset: 表示浏览器Y轴(垂直)滚动条的偏移距离。(兼容:ie9/10、chrome、firefox)
二。jQuery的处理。
$(window).height()
:获取屏幕的可视高度。
$(window).width()
:获取屏幕的可视宽度。
三。实例.
看上面的三张图,一个dialog用户地方不同显示的方式也发生了变化,此时就需要计算对应元素所在位置了。
代码如下:
function showPrompt(){
var list = $('.outer-inner-item .item li');
for(var i in list){
list[i]. onmouseenter = function() {
clearTimeout(time);
var top = $('.outer-inner-item .item li').offset().top;
var left = $(this).offset().left;
var offsetTop = top - window.pageYOffset;
var visualHeight = $(window).height()/2 + 36;
var visualWidth = $(window).width()/2;
for(var i in list){
list.eq(i).find($('.dialog')).css('display','none');
list.eq(i).find($('.dialog .arrow-bottom')).css({ display: 'none'});
list.eq(i).find($('.dialog .arrow-top')).css({ display: 'none'});
}
if(offsetTop > visualHeight){
$(this).find($('.dialog .arrow-bottom')).css({ display: 'block'});
$(this).find($('.dialog .arrow-top')).css({ display: 'none'});
$(this).find($('.dialog')).css({ bottom: '110px',top: 'auto',display:'block'})
}else{
$(this).find($('.dialog .arrow-bottom')).css({ display: 'none'});
$(this).find($('.dialog .arrow-top')).css({ display: 'block'});
$(this).find($('.dialog')).css({ top: '110px',bottom:'auto',display:'block'})
}
if(left < visualWidth){
$(this).find($('.dialog .arrow-bottom')).css({right:'auto',left:'30px'});
$(this).find($('.dialog .arrow-top')).css({right:'auto',left:'30px'});
$(this).find($('.dialog')).css({right:'auto',left:0});
}else{
$(this).find($('.dialog .arrow-top')).css({right:'30px',left:'auto'});
$(this).find($('.dialog .arrow-bottom')).css({right:'30px',left:'auto'});
$(this).find($('.dialog')).css({right:0,left:'auto'});
}
};
list[i].onmouseleave = function() {
var data = this;
time = setTimeout(function(){
$(data).find($('.dialog')).css('display','none');
},1000);
}
}
}
分享到:
相关推荐
jQuery获取当前点击的对象元素(实现代码) [removed][removed] </head> <body> 段落1 段落2 段落3 段落4 段落5 [removed] //获取当前点击的对象 $('p').click( function(){ //this表示当前被...
主要介绍了jQuery实现获取元素索引值index的方法,涉及jQuery针对页面元素的遍历,index索引操作及属性操作相关技巧,需要的朋友可以参考下
下面小编就为大家带来一篇jquery获取form表单input元素值的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
*获得TEXT.AREATEXT的值*/
主要介绍了使用jQuery获取元素父节点的方法,通俗易懂,需要的朋友可以参考下。
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[name=items][checked]’).val(); 获取select被选中项的文本 var ...
主要介绍了JQuery获取元素尺寸、位置及页面滚动事件应用,结合实例形式分析了jQuery针对页面元素动态操作相关实现技巧,并给出了购物车动画效果案例进行总结,需要的朋友可以参考下
jquery父子窗口互相获取元素demo的代码,希望对大家有用
本篇文章主要是对Jquery获取元素的父容器对象的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
希望大家多多支持,共同学习,共同进步!
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id").closest() 获取其最近的祖先元素,依次上溯 ——————————————————————————– 2.获取...
获取/设置标签的位置offset()相对于页面左上角的坐标注意:此方法只对可见元素有效参数带有 top 和 left 属性的对象获取匹配元素不包括边框,包括内边
本文实例讲述了jQuery获取页面元素绝对与相对位置的方法。分享给大家供大家参考。具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset...
js与jquery获取父元素,删除子元素的两种不同方法.docx
本文实例讲述了jQuery获取父元素节点、子元素节点及兄弟元素节点的方法。分享给大家供大家参考,具体如下: 先来看这段html代码,整个取节点(父、子、兄弟等)的方法都是围绕这段代码来的: 条目一 第一项 ...
如获取id为divId的div下的第一个子div $("#divId").children("div").get(0) ...以上这篇Jquery获取第一个子元素简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
jquery获取元素索引值index()方法:jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数。 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素...
主要介绍了jquery如何获取元素的滚动条高度等实现代码,需要的朋友可以参考下
用jquery获取元素内容需要分两个情况: input 用val(); var value = $(‘#test’).val(); 是否为空的判断方法: if(value.length == 0){} 如果value为空执行的操作 if(value!=”){} 如果value不为空执行的操作 ...