offset()

一、语法

1、 返回偏移坐标

$(selector).offset();

top: $(selector).offset().top;

left: $(selector).offset().left;

获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

2. css()---left top

css的left和top属性指的是距最近的一个position属性为relative或者absolute的父级元素的左边后上边的距离,

明白了css的left和top的含义,可以看下jquery获取css的值,因为left和top也都是普通的css属性所以可以使用如下代码来获取

var left = $('#test').css('left');

var top = $('#test').css('top');

3.scrollTop() 方法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。

语法

$(selector).scrollTop(offset)

jquery offset(),的更多相关文章

  1. 转学步园:jquery offset

    JQuery Offset实验与应用 我们有时候需要实现这样一种功能:点击一个按钮,然后在按钮的下方显示一个div.当按钮位于角落时,div的位置设定就需要计算,使div完全显示. 我打算使用offs ...

  2. Jquery Offset, Document, Window 都是什么

    From http://www.cnblogs.com/luhe/archive/2012/11/14/2769263.html   JQuery Offset实验与应用 我们有时候需要实现这样一种功 ...

  3. jQuery offset()源码解析

    首先是原型上的offset方法,根据arguments判断到底是取值还是设值.如果是设置,就遍历调用静态方法jQuery.offset.setOffset 如果是取值.那么就是从"var d ...

  4. jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  5. jquery offset() 与position()方法的区别

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...

  6. jquery offset positon 获取位置不准的解决方法

    问题: 本地开发时,由于使用了图片,而且使用了offset().top涉及到图片所在的div距离计算的部分,本地开发一切都没问题:但是部署到服务器上时却出现布局错乱,经过排查发现总是少了一个图片高度的 ...

  7. jquery offset()和position()的区别

    <script src="jquery/jquery-3.3.1.min.js"></script> <script type="text/ ...

  8. jquery offset tip

    /* * 这是一张 JavaScript 代码草稿纸. * * 输入一些 JavaScript,然后可点击右键或从“执行”菜单中选择: * 1. 运行 对选中的文本求值(eval) (Ctrl+R): ...

  9. jQuery offset()函数 和 scrollTop()函数

    $(dom).offset() 方法返回或设置匹配元素相对于文档的偏移(位置).{left:100,top:100} $(dom).scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. ...

随机推荐

  1. 从零开始的四轴飞行器-开篇flag

    在这里立下flag,我要理解学会四轴飞行器的控制方法.

  2. zeptojs库解读3之ajax模块

    对于ajax,三步骤,第一,创建xhr对象:第二,发送请求:第三,处理响应. 但在编写过程中,实际中会碰到以下问题, 1.超时 2.跨域 3.后退 解决方法: 1.超时 设置定时器,规定的时间内未返回 ...

  3. C# 窗口模拟点击按钮或关闭窗口

    public class CloseForm { [DllImport("user32", EntryPoint = "FindWindow")] privat ...

  4. Python四大主流网络编程框架

    目前的4种主流Python网络框架:Django.Tornado.Flask.Twisted.

  5. 使用 dplyr 管道操作处理数据框

    关于数据操作的另一个流行的包是dplyr,它发明了一种数据操作语法.dplyr 扩展包并没有使用构建子集函数([ ]),而是定义了一系列基础的变形函数作为数据操作模块,并且引入了一个管道操作符,利用管 ...

  6. 对不队—— Alpha冲刺

    第三天  日期:2018/6/18 一. 今日完成任务:会议内容管理部分 冯晓.马思远:会议网站栏目管理开发,博客撰写 王爽.彭辉:参会人员管理开发 吴琼.郝延婷:审稿专家管理开发 1.1会议管理界面 ...

  7. 【Golang 接口自动化07】struct转map的三种方式

    背景 我们在前面介绍过怎么使用net/http发送json或者map数据,那么它能不能直接发送结构体数据呢?我们今天一起来学习结构体struct转map的三种方法,为后续做铺垫. struct转map ...

  8. English trip -- Review Unit4 Health 健康

    medicine    n. 药:医学:内科:巫术  vt. 用药物治疗:给…用药 drug  毒药;药店(drugstore) pill  药丸 patient 病人 head 头 hands 手 ...

  9. python模块——re模块(简单的计算器功能实现_eval版)

    #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = "loki" # Usage: Make a Diy Calcu ...

  10. 加密算法(DES,AES,RSA,MD5,SHA1,Base64)比较和项目应用

    加密技术通常分为两大类:"对称式"和"非对称式". 对称性加密算法:对称式加密就是加密和解密使用同一个密钥.信息接收双方都需事先知道密匙和加解密算法且其密匙是相 ...