跟隨屏幕滾動層、遮罩層、獲取Div相對定位、整個屏幕、html文檔的jquery基本操作

一、層跟隨屏幕滾動

       <div style="width: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;
    width:2000px;
    height:2000px;
    }

    .div2{
    background-color:#33FF66;
    width: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; width: 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>