• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery offset函数应用实例

jquery offset函数应用实例

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了offset等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

  我们有时候需要实现这样一种功能:点击一个按钮,然后在按钮的下方显示一个div。当按钮位于角落时,div的位置设定就需要调整,不然,div将显示不完全。

我打算使用offset()方法实现此功能,但要先弄清楚他的功能。

offset()的top是指元素与document的上边的距离,而不是浏览器当前窗体的上边缘,如图1。

 图1:document高度超过window,浏览器出现滚动条,滚动滚动条,提交按钮的offset不变。

图2:document中的div有滚动条,提交按钮的offset随div的滚动变化而变化,与document无关

offset().left 同理。

  通过上面的实验我们可以得出以下结论:offset() 获取指元素(html 元素)距离document上边缘、左边缘的像素,我们只要清楚浏览器中document是那部分就可以正确使用offset()。关于document可以阅读 JQuery   window、document、 body

  那么我们怎么保证元素完整的显示在浏览器视窗里呢?我们可以结合offset 和 scrollTop来实现。

  scrollTop获取的是什么值?根据我的实验,只有元素具有滚动条,并且滚动了一定距离,才有scrollTop值,没有滚动条的元素scrollTop=0,比如一个button的scrollTop恒等于0。以前我有种错误的认知:document与他里面的子元素具有相同的滚动值,这是错误的,子元素与容器的滚动值无关。

  按图1(document有滚动条),需计算控件的offsetTop、高度,document的scrollTop;

  按图2(document无滚动条),计算控件的offsetTop、高度

源代码:jquery_offset.rar

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-08-16jQuery中append()方法用法实例
  • 2017-08-16JQuery 学习笔记 选择器之二
  • 2017-08-16多个$(document).ready()的执行顺序实例分析
  • 2017-08-16jQuery模拟新浪微博首页滚动效果的方法
  • 2017-08-16jQuery增加、删除及修改select option的方法
  • 2017-08-16jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
  • 2017-08-16基于jQuery实现拖拽图标到回收站并删除功能
  • 2017-08-16jQuery实现鼠标划过展示大图的方法
  • 2017-08-16jQuery滑动到底部加载下一页数据的实例代码
  • 2017-08-16JQuery替换DOM节点的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery 获取/设置/删除DOM元素的属性以a元素为例
    • asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
    • JQuery的ON()方法支持的所有事件罗列
    • jQuery 选择同时包含两个class的元素的实现方法
    • jQuery基础知识小结
    • 详解handlebars+require基本使用方法
    • jQuery的remove()方法使用详解
    • 基于jquery用于查询操作的实现代码
    • jQuery基于muipicker实现仿ios时间选择
    • jquery实现表单获取短信验证码代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有