• 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函数应用实例

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了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好友复制网址打印

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

相关文章

  • jquery实现对联广告的方法
  • JQuery实现table行折叠效果以JSON做数据源
  • jQuery基于ajax()使用serialize()提交form数据的方法
  • jQuery qrcode生成二维码的方法
  • jQuery实现下拉框选择图片功能实例
  • jQuery实现多级联动下拉列表查询框
  • jquery radio的取值_radio的选中_radio的重置方法
  • jquery 全选、全不选、反选效果的实现代码【推荐】
  • 用jQuery简化JavaScript开发分析
  • 基于JQuery的抓取博客园首页RSS的代码

文章分类

  • 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实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
    • jquery带有索引按钮且自动轮播切换特效代码分享
    • 图片放大镜jquery.jqzoom.js使用实例附放大镜图标
    • poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
    • 使用jQuery实现更改默认alert框体
    • web的各种前端打印方法之jquery打印插件jqprint实现网页打印
    • 基于Jquery的跨域传输数据(JSONP)
    • 基于JQuery 滑动与动画的说明介绍
    • Jquery 方块随着鼠标所在的区域而放大

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

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