zoukankan      html  css  js  c++  java
  • 跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作

    一、层跟随屏幕滚动

           <div style="120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv">
            
            </div>
            <div class="div1">层1</div>
            <div class="div2">层2</div>

     <style type="text/css">
            .div1{
        background-color:#FF0000;
        2000px;
        height:2000px;
        }

        .div2{
        background-color:#33FF66;
        100px;
        height:100px;
        position:fixed;
        left:50px;
        top:50px;
        }
        </style>

    <script>

        (1)对文档、屏幕、层的一些jquery基本操作

    var showAdminUser = function (obj) {
            var offSet = $(obj).offset();
            var docTop = offSet.top;    //当前元素相对文档top偏移位置
            var docLeft = offSet.left;  //当前元素相对文档left偏移位置

            var docWidth = $(document).width(); //整个页面文档的宽度
            var docHeight = $(document).height();   //整个页面文档的高度
            var dScrollTop = $(document).scrollTop(); //整个文档滚动条相对top位置
            var wScrollTop = $(window).scrollTop(); //整个屏幕滚动条相对top位置
            var winWidth = $(window).width(); //整个屏幕宽度
            var winHeight = $(window).height();//整个屏幕高度

            alert("docWidth: " + docWidth + "——" + "docHeight:" + docHeight + " dScrollTop:" + dScrollTop);


            var dWidth = document.body.offsetWidth;  //纯javascript整个页面文档的宽度
            var hHeight = document.body.offsetHeight;   //纯javascript整个页面文档的高度
            var scrollTop = document.body.scrollTop + document.documentElement.scrollTop
            alert(" docWidth: " + dWidth + " docHeight: " + hHeight + " : " + scrollTop);

        }

      (2)层伴随滚动条
        $(document).ready(function () {

            $(window).scroll(function () {

                var scrollTop = $(document).scrollTop(); //htm文档滚动对象距离顶部位置
                //alert(scrollTop);

                var AdminUserStateDiv = $("#AdminUserStateDiv");
                //AdminUserStateDiv.css("top", scrollTop + "px");
                AdminUserStateDiv.animate({ "top": scrollTop + "px" }, 0);  //层伴随滚动条滚动,时时改变层对顶部的距离
                //$("#scrollUl").animate({ "marginLeft": scrollposition + "px" }, 10);

            })
        });

    </script>

    (3)遮罩层和加载图片效果

        <div id="CommonAlertMessageBackg" style="display: none; height: 100%; left: 0; margin: 0; opacity: 0.7; position:absolute; top: 0; visibility: visible; 100%; z-index: 998; "> </div>  //解释:position:absolute;是固定在屏幕上;position:fixed;是系在屏幕上,跟随着滚动条移动的;


        <div id="loadding" style="display: none; position: absolute; z-index: 999;">
            <img src="@Url.Content("~/Content/img/loading3.gif")" alt="加载中......" />
        </div>

    <script type="text/javascript">
        var ShowLoadding = function () {
            var width = $(window).width();
            var height = $(window).height();
            $("#loadding").css("left", width / 2);
            $("#loadding").css("top", height / 2);
            $("#loadding").show();

            var top = $("#ListContent").offset().top;
            var left = $("#ListContent").offset().left;
            var width = $("#ListContent").width();
            var height = $("#ListContent").height();
            $("#CommonAlertMessageBackg").css({ "top": top, "left": left, "width": width, "height": height });

            $("#CommonAlertMessageBackg").show();
        };
        var HideLoadding = function () {
            $("#loadding").hide();
            $("#CommonAlertMessageBackg").hide();
        };

    </script>

  • 相关阅读:
    聊聊Unity2018的LWRP和混合光照
    不能直接获取?聊聊如何在Shader Graph中获取深度图
    还原堆栈信息,分析地形系统使用ASTC格式的纹理导致Crash的问题
    巧妙设置Texture Type,将ShadowMask内存占用变成之前的1/4
    开发自定义ScriptableRenderPipeline,将DrawCall降低180倍
    Signed Distance Field Shadow in Unity
    Daily Pathtracer!安利下不错的Pathtracer学习资料
    聊聊LightProbe原理实现以及对LightProbe数据的修改
    Scala学习笔记(六):本地函数、头等函数、占位符和部分应用函数
    Scala学习笔记(五):内建控制循环
  • 原文地址:https://www.cnblogs.com/BluceLee/p/4159447.html
Copyright © 2011-2022 走看看