jQuery获得页面元素的绝对/相对位置
获取页面某一元素的绝对X,Y坐标,可以用offset()方法:
var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
获取相对(父元素)位置:
var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;
让Div随滚动条移动:
<div id="oLayer" style="position: absolute; left: 0; top:80px; z-index: 2; background: a9c9ef; margin-left:6px;
width: 140px; height: 70px">
</div>
jquery代码:
$(window).scroll(function() {
var init_pos = $('#oLayer').offset().top;
$('#oLayer').css("top", $(window).scrollTop()+80)
});
jQuery获得页面元素的绝对/相对位置的更多相关文章
- 关于jquery计算页面元素数量
这段jquery计算页面元素数量代码,能不能刷新页面直接输出数量,而不用点计算按钮 <scriptsrc="http://ajax.googleapis.com/ajax/libs/j ...
- 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...
- jQuery 判断页面元素是否存在的代码
在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
- jQuery修改页面元素的属性
作为一个后台开发者,在web开发的时候会常常遇到修改前台页面的属性的问题.这两天我发现jQuery的$("#id").attr("prop","值&q ...
- jQuery获得页面绝对和相对的位置
获得某一元素绝对x,y位置,可以用offset方法 var X = $('#DivID').offset().top; var y=$("#divid").offset().lef ...
- jquery判断页面元素是否存在
在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
- jQuery 获取页面元素的属性值
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- jQuery实现页面元素智能定位
实现过程 Js侦听滚动事件,当页面滚动的距离(页面滚动的高度)超出了对象(要滚动的层)距离页面顶部的高度,即要滚动的层到达了浏览器窗口上边缘时,立即将对象定位属性position值改成fixed(固定 ...
随机推荐
- 提升 Web开发性能的 10 个技巧
随着网络的高速发展,网络性能的持续提高成为能否在芸芸App中脱颖而出的关键.高度联结的世界意味着用户对网络体验提出了更严苛的要求.假如你的网站不能做到快速响应,又或你的App存在延迟,用户很快就会移情 ...
- 关于一个app中数据库的问题
如果是不同名字的数据库,可以有多个数据库操作dao 如果是同样名字的数据库,只能有一个数据库操作dao,创建表的语句可以写在一个oncreate方法里面 例如 public class Address ...
- android布局不带参数返回
package com.example.lesson3_4; import java.util.ArrayList; import java.util.List; import android.app ...
- 《算法图解》中涉及的算法的总结及java实现
该项目源代码已经放到Github上,有兴趣可以点击AlgorithmGraphExample 进行访问 项目启动,项目使用maven搭建,如果不使用maven导入,请保证有Junit4的jar包在工程 ...
- w3 parse a url
最新链接:https://www.w3.org/TR/html53/ 2.6 URLs — HTML5 li, dd li { margin: 1em 0; } dt, dfn { font-wei ...
- jquery动态实现填充下拉框
当点下拉框时动态加载后台数据. 后台代码 protected void doPost(HttpServletRequest request, HttpServletResponse response) ...
- What is the difference between try/except and assert?
assert only check if a condition is true or not and throw an exception. A try/except block can run a ...
- 安装ruby开发环境
如何快速正确的安装 Ruby, Rails 运行环境 对于新入门的开发者,如何安装 Ruby, Ruby Gems 和 Rails 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 ...
- MySQLfailover错误一则
由于公司现有主库要转移到新的主库上,所以,我打算利用MySQLfailover工具的故障转移. 1.开发把程序账号转移到新主库上 2.停止现有主库,使之进行故障转移,转移期间会自动锁表,保持数据一致性 ...
- (57)zabbix Slide shows幻灯片展示
定义好screen之后,我们想了解服务器状况之时,一般会一个个screen点过去,zabbix提供了幻灯片展示方法,可以定义多个Slide,一个slide中可以包含多个screen. 创建slide ...