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. 使用NSURLProtocol和NSURLSession拦截UIWebView的HTTP请求(包括ajax请求)

    问题:服务器端有一个网站需要AD认证,整站都开了Basic认证,包括图片,CSS等资源,我在HTTP请求头里面添加认证所需的用户名和密码,传递到服务器端可以认证通过.我在UIWebView的shoul ...

  2. js变量和函数提升的小结

    对于变量和函数一起的提升说法,我比较认同"LittleBear"的说法. 比如: <script> console.log(a)//function a(){} var ...

  3. 通用RowMapper封装查询结果到自定义类中

    package object; import java.lang.reflect.Field;import java.sql.ResultSet;import java.sql.SQLExceptio ...

  4. vs2015类中方法前的引用链接不显示的解决方案

    在工具→选项,打开如下界面,寻找“文本编辑器→所有语言”中设置显示:&lt;img data-rawheight="761" data-rawwidth="130 ...

  5. 问题：sqlserver if；结果： SqlServer if else和case

    SqlServer if else和case 分类: SQLSERVER 2013-03-01 16:51 11328人阅读 评论(0) 收藏 举报 行转列 目录(?)[+] if else 要提示的 ...

  6. lyui 列表 上传

    1.js layui.use(['table', 'element', 'laydate', 'layer','upload'], function () { var table = layui.ta ...

  7. 7.30实习培训日志-SQL优化

    总结 今天早上考试,下午主要是老师引导我们学习SQL优化,晚上主要是同学的技术分享,杨松柏同学主要给我们分享了java的io的一些东西,c10k问题,bio(同步阻塞IO),NIO(同步非阻塞IO), ...

  8. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  9. VSS配置

    http://www.cnblogs.com/FreeDong/articles/2193151.html

  10. C#面向对象三大特性之一：封装

    面向对象的三大特性:封装.继承.多态. 1.封装概念 封装:每个对象都包含有它能进行操作的所有信息,这个特性称为封装.这样的方法包含在类中,通过类的实例来实现. 2.封装的优点 A.良好的封装能够减少 ...