1. 获取和设置元素的尺寸

2. 获取元素相对页面的绝对位置：offset()

这种方式增加的盒子不会对之前的结构产生影响

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>手风琴</title>

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

    <script type="text/javascript">

        $(function () {

            var $pos = $('.pos');

            var pos = $pos.offset();

            var w = $pos.outerWidth();

            // alert(pos.left);

            // console.log(pos);

            $('.pop').css({left:pos.left+w,top:pos.top});

            $pos.mouseover(function () {

                 $('.pop').show();

            });

            $pos.mouseout(function () {

                $('.pop').hide();

            });

        })

    </script>

    <style type="text/css">

        .box{

            width:100px;

            height:100px;

            background-color: hotpink;

            margin-bottom: 10px;

        }

        .pos{

            margin-left:500px;

        }

        .pop{

            width:100px;

            height:100px;

            background-color: gold;

            position:fixed;

            left:0;

            top:0;

            display: none;

        }

    </style>

</head>

<body>

<div class="box"></div>

<div class="box"></div>

<div class="box pos"></div>

<div class="box"></div>

<div class="pop">提示信息</div>

</body>

</html>

3. $(window).height(): 获取可视区的高度（桌面显示的一个窗口的大小）

4. $(document).height(): 获取页面高度

5.  $(document).scrollTop()；$(document).scrollLeft(): 获取页面滚动距离

jquery——尺寸的更多相关文章

  1. 实现文字自动横移--- jquery尺寸相关函数

    效果图: 一实现文字自动横移 <style type="text/css"> #demo {overflow:scroll;width:740px; } #indemo ...

  2. jQuery 基础(4)jQuery 尺寸

    jQuery 尺寸方法jQuery 提供多个处理尺寸的重要方法:width()height()innerWidth()innerHeight()outerWidth()outerHeight()jQu ...

  3. jQuery 尺寸

    通过 jQuery,很容易处理元素和浏览器窗口的尺寸. jQuery 尺寸 方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHe ...

  4. 关于jquery尺寸的总结

    以前总是对jquery的尺寸稀里糊涂,有需要的可以看下下面的代码: ①页面布局如下: <!doctype html> <html> <head> <meta ...

  5. jquery尺寸和jQuery设置和获取内容方法

    一.jquery尺寸 jQuery 提供多个处理尺寸的重要方法: width()    设置或返回元素的宽度(不包括内边距.边框或外边距),括号中可填数值宽度参数,无单位 height()   设置或 ...

  6. jQuery尺寸

    jQuery 尺寸 jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包 ...

  7. jQuery尺寸算法

    我们默认都统一是采用offsetWidth或者offsetHeight取值了,但我们知道关于这2个尺寸的算法是这样的: offsetWidth = border-left-width + paddin ...

  8. 图解JQUERY尺寸及位置定义

    最近在学习JQUERY的一些应用,接触到了JQUERY对于元素尺寸及位置定义,还有就是配合浏览器尺 寸及状态的计算所做出的一些动画特效.其实像这类JQUERY应用无外乎涉及这些属性的调用:innerH ...

  9. jQuery 尺寸 方法

    jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHeight()

随机推荐

  1. git导入项目

    远程仓库已经存在,使用的是gitblit,作为终端eclipse如何从中拷贝代码呢? 0.准备工作,windows->preference->team->git->config ...

  2. UVa11624(逃离火焰问题)

    #include"cstdio" #include"queue" #include"cstring" using namespace std ...

  3. 基于ftp服务实现yum网络共享

    安装ftp服务:yum install vsftpd 安装后: CentOS7 启动服务:systemctl start vsftpd 设置开机启动:systemctl enable vsftpd 同 ...

  4. 数据库：mysql 获取刚插入行id[转]

    我们在写数据库程序的时候,经常会需要获取某个表中的最大序号数, 一般情况下获取刚插入的数据的id,使用select max(id) from table 是可以的.但在多线程情况下,就不行了. 下面介 ...

  5. stm32与三菱PLC通信

    一.三菱PLC通讯概要   三菱PLC FX系列通信结构如下图所示: 三菱PLC FX系列的通信规格如下图所示: 三菱PLC FX系列一般有以下几种通信模块,以FX2N为例: FX2N-232-BD ...

  6. springMVC绑定json参数之二（2.2.4）

    二.springmvc 接收不同格式的json字符串 4).格式四:json传递复杂对象(对象中有属性,还有List,这里验证数组接收,不用List,其他的和上一节不变) 测试一: Test对象属性如 ...

  7. etcd命令

    etcdctl支持下面列出来的命令,基本上可以分为数据库操作和非数据库操作,可以查看etcdctl README.md来了解更多 ➜ ~ etcdctl -hNAME: etcdctl - A sim ...

  8. LAMP 1.6 Discuz打开错误

    打开discuz失败, ps aux |grep mysql ps aux |grep httpd 查看mysql apache有没有打开. 重启mysql service mysqld restar ...

  9. SpringMVC 学习笔记(文件的上传和下载)

    在web项目中会遇到的问题:文件上传 文件上传在前端页面的设置:form表单 设置 input 类型 文件上传的请求方式要使用post,要将enctype设置为multipart/form-data ...

  10. windows7 8 mac 安装docker

    安装: 下载 DockerToolbox.exe 苹果的也可以用这个链接下载 一直点击下一步(网络要求很高安装时,网络不好会报错 多点几次就好了)