zoukankan      html  css  js  c++  java
  • 位置

    ---恢复内容开始---

    有时候需要知道元素当前的位置。

    jQuery中有几个方法可以获取元素在页面中的位置。

     方法  说明
    offset() 获取或设置元素相对于文档对象左上角的坐标。
    返回结果包含两个属性:top ,相对于文档或其容器元素顶部的距离;left ,相对于文档或其容器元素左则的距离。
    postion() 获取或设置元素相对于不在普通布局流中的祖先节点的坐标。
    返回结果包含两个属性:top ,相对于文档或其容器元素顶部的距离;left ,相对于文档或其容器元素左则的距离。
    如果所有祖先节点都包含在普通布局流中,那么该方法返回的结果与offset()方法相同。

    示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>位置</title>
            </script>
            <style>
                body{
     
                    min- 600px;
                    
                    margin-bottom: 60px;
                }
                #slideAd {
                     130px;
                    height: 60px;
                    color: #fff;
                    border-top: 1px solid #fff;
                    border-left: 1px solid #fff;
                    border-bottom: 1px solid #fff;
                    
                    padding: 25px 20px 10px 85px;
                    position: fixed;
                    bottom: 20px;
                    right: -235px;
                    text-transform: uppercase;}
                </style>
            </head>
            <body>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br><br><br><br><br>
                <footer >&copy;2018</footer>
            <div id="slideAd">春节优惠</div>
            <script>
                var $window = $(window);
                var $slideAd = $("#slideAd");
                // $("footer").offset().top 获取页脚到顶部的距离
                // $window.height() 浏览器可视区域高度
                var endZone = $("footer").offset().top - $window.height() - 300;
     
                $(window).scroll(function () {
                    if (endZone < $window.scrollTop()) {
                        $slideAd.animate({'right': '0px'}, 250);
                    } else {
                        $slideAd.stop(true).animate({'right': '-360px'}, 250);
                    }
                });
            </script>
        </body>
    </html>
  • 相关阅读:
    Building a flexiable renderer
    Indirect Illumination in mental ray
    我的心情
    Cellular Automata
    Subsurface Scattering in mental ray
    Shader Types in mental ray
    BSP Traversal
    我的渲染器终于达到了MR的速度
    How to handle displacement and motion blur
    说明
  • 原文地址:https://www.cnblogs.com/max-hou/p/9167612.html
Copyright © 2011-2022 走看看