jquery——尺寸

 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(): 获取页面滚动距离

 

posted @ 2018-06-21 11:09  高圈圈  阅读(270)  评论(0)    收藏  举报