jquery——尺寸

最新推荐文章于 2024-09-02 17:27:54 发布

子非鱼1210

最新推荐文章于 2024-09-02 17:27:54 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gaoquanquan/p/9207895.html

版权

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

转载于:https://www.cnblogs.com/gaoquanquan/p/9207895.html

子非鱼1210

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery——尺寸

1. 获取和设置元素的尺寸2. 获取元素相对页面的绝对位置：offset()这种方式增加的盒子不会对之前的结构产生影响demo：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴&l...
复制链接

扫一扫