JQuery学习笔记(三)遮罩层、阴影层

在AJAX横行的时代，使用JQuery实现的阴影层功能对于用户登陆很方便。其主要实现原理有：

一个用于遮罩的背景层，css代码为

Css 代码
  1. #BigDiv{position:absolute; top:0px; left:0px; background:#777; filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3; z-index:1000; display:none; width:100%;}

点击按钮后弹出遮罩层，并显示登陆窗口或者是别的东西，点击关闭后隐藏背景层。(其中我加了些JQ的特效)。js代码为

Javascript 代码
  1. $("#bt1").click(function(){
  2.         var sHeight;
  3.         if(window.screen.availHeight > document.body.scrollHeight)
  4.         { //当高度少于一屏
  5.             sHeight = window.screen.availHeight-140;
  6.         }
  7.         else
  8.         {//当高度大于一屏
  9.             sHeight = document.body.scrollHeight+15;   
  10.         }
  11.         $("#BigDiv").css("height",sHeight+"px");
  12.         $("#BigDiv").css("display","block");
  13.         setTimeout(function(){$("#Demo").fadeIn();},500)
  14.     });
  15.     $("#Close").click(function(){
  16.         $("#Demo").fadeOut();
  17.         setTimeout(function(){$("#BigDiv").css("display","none");},500);
  18.     });

如果页面过长，拖动滚动条后，让你的登陆窗口或者别的窗口始终保持在浏览器的中央。其中我调用了谷歌提供的一些共用js。

Javascript 代码
  1. //以下为共用js，别的地方通用//
  2. // 计算当前窗口的宽度 //
  3. function pageWidth(){
  4.              return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
  5. }
  6.  
  7. // 计算当前窗口的高度 //
  8. function pageHeight(){
  9.              return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
  10. }
  11.  
  12. // 计算当前窗口的上边滚动条//
  13. function topPosition(){
  14.               return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
  15. }
  16.  
  17. // 计算当前窗口的左边滚动条//
  18. function leftPosition(){
  19.              return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
  20. }
  21.  
  22. //解决外嵌样式style , 用js获取不到的问题。
  23. function getStyle(elem, name){
  24.             if(elem.style[name])
  25.                 return elem.style[name];
  26.             else if(elem.currentStyle)    //ie
  27.                 return elem.currentStyle[name];
  28.             else if(document.defaultView && document.defaultView.getComputedStyle){    //w3c
  29.                 name = name.replace(/([A-Z])/g,"-$1");
  30.                 name = name.toLowerCase();
  31.                 
  32.                 var s = document.defaultView.getComputedStyle(elem,"");
  33.                 return s && s.getPropertyValue(name);
  34.             } else
  35.                 return null
  36. }

实现窗口随着滚动条滚动的js代码

Javascript 代码
  1.     window.onscroll = window_onscroll;
  2.     function window_onscroll(){
  3.         var MyDiv =document.getElementById("Demo");
  4.         var MyDiv_h = getStyle(MyDiv,"height");
  5.         MyDiv_h = parseInt(MyDiv_h);
  6.         var height = pageHeight();
  7.         var top = topPosition();
  8.         var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距
  9.         MyDiv.style.top =  Div_topposition + "px";
  10.     }

DEMO

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/pipizhu/p/1575791.html