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. 使用 Anthem.NET 的常见回调（Callback）处理方式小结

    在 Anthem.NET 中,通过 XmlHttp 或 XmlHttpRequest 组件对服务器端所作的一次无刷新调用(通常是异步模式),称为一个回调(Callback). 本文内容是对 Anthe ...

  2. mysql5.5主从同步复制配置

    在上篇文章<烂泥:学习mysql数据库主从同步复制原理>中,我们介绍了有关mysql主从复制的基本原理.在这篇文章中,我们来实际测试下mysql5.5的主从同步复制功能. 注意mysql5 ...

  3. Java中读取输入方式的性能比较

    程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值的现成函数!Java没有提供这样的函数也不代表遇到这 ...

  4. MySQL on Azure高可用性设计 DRBD - Corosync - Pacemaker - CRM (二)

    在上一篇文章中描述了MySQL HA on Azured 设计思路,本篇文章中将描述具体的部署,每个组件的安装和配置. 整体的设计架构如下: 下面将是所有组件的安装配置过程,所有的虚拟机是CentOS ...

  5. python unittest之断言及示例

    python unintest单元测试框架提供了一整套内置的断言方法. 如果断言失败,则抛出一个AssertionError,并标识该测试为失败状态 如果异常,则当做错误来处理 注意:以上两种方式的区 ...

  6. IIS备份和还原

    当我们电脑系统有大量的站点和虚拟目录的时候,电脑因为种种原因需要重做系统,那么重装系统后这些站点我们是否只能一个一个的添加,如果有成百上千个站点呢,任务量可想而知,本文将介绍如何备份和还原window ...

  7. SharePoint Project Server List 列表CURD操作使用rest api接口

    //#region 界面交互代码 var issuesUtils = issuesUtils || {}; (function () { /** * 点击问题提处理方案按钮事件 */ issuesUt ...

  8. LAMP 2.0Apache日志切割

    每次访问网站就会产生若干条日志,当然前提是已经配置了日志. 配置日志的文件在 vim /usr/local/apache2/conf/extra/httpd-vhosts.conf 把注释掉的这两行打 ...

  9. [codeforces821E]Okabe and El Psy Kongroo

    题意:(0,0)走到(k,0),每一部分有一条线段作为上界,求方案数. 解题关键:dp+矩阵快速幂,盗个图,注意ll 关于那条语句为什么不加也可以,因为我的矩阵C,就是因为多传了了len的原因,其他位 ...

  10. “box-shadow”属性(转)

    “box-shadow”属性 box-shadow属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”.这些阴影效果允许我们在原本平面的.二维 ...