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. Android的各国语言的缩写

    语言包在android工程中的对应关系: 中文(中国):values-zh-rCN 中文(台湾):values-zh-rTW 中文(香港):values-zh-rHK 英语(美国):values-en ...

  2. BZOJ2288：[POJ Challenge]生日礼物

    浅谈堆:https://www.cnblogs.com/AKMer/p/10284629.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?id ...

  3. iOS获取设备型号的方法

    1. [UIDevice currentDevice].model   自己写的看只抓到模拟器和iPhone.暂时不推荐. 2.自己写的找的方法再添加.直接  NSString * deviceMod ...

  4. android使用wcf接收上传图片视频文件

    一.Android 权限配置文件: <?xml version="1.0" encoding="utf-8"?> <manifest xmln ...

  5. 广度优先搜索（BFS）

    广度优先搜索算法(Breadth-First-Search),又译作宽度优先搜索,或横向优先搜索,简称BFS,是一种图形搜索算法.简单的说,BFS是从根节点开始,沿着树的宽度遍历树的节点.如果所有节点 ...

  6. JVM体系结构之六：堆Heap之2：新生代及新生代里的两个Survivor区(下一轮S0与S1交换角色，如此循环往复)、常见调优参数

    一.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完全可以,分代的唯一理由就是优化GC性能.你先想想,如果没有分代,那我们所有的对象都在一块,GC的时候我 ...

  7. 杂项：zabbix（WEB界面的提供分布式系统监视以及网络监视功能）

    ylbtech-杂项:zabbix(WEB界面的提供分布式系统监视以及网络监视功能) zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.z ...

  8. css菜鸟学习之block，inline和inline-block概念和区别

    block,inline和inline-block概念和区别   总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) ...

  9. Qt弹出消息对话框

    添加头文件 #include <QMessageBox> if(ui->lineEditXStart->text().isEmpty()) //判断lineedit输入内容是否 ...

  10. CodeForces 1107F. Vasya and Endless Credits

    题目简述:给定 $n \leq 500$ 个贷款方式,其中第$i$个贷款额为$a_i$元,需要$k_i$个月偿还,每月还贷$b_i$元.在每个月月初可申请其中一个贷款,而在每个月月底时需要还贷.求:( ...