一、IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别。
clientHeight
在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。
offsetHeight
在IE下,offsetHeight也是浏览器可视区域的高(包括边线)
在FF下,offsetHeight是页面具体内容的高度
scrollHeight
在IE下,scrollHeight 是页面具体内容的高度,可以小于clientHeight
在FF下,scrollHeight 是网页内容高度,不过最小值是clientHeight
二、下面是跨浏览器取得当前页面的高度的解决方法。
function getPageSize()
{
var body = document.documentElement;
var bodyOffsetWidth = 0;
var bodyOffsetHeight = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var pageDimensions = [0,0];
pageDimensions[0]=body.clientHeight;
pageDimensions[1]=body.clientWidth;
bodyOffsetWidth=body.offsetWidth;
bodyOffsetHeight=body.offsetHeight;
bodyScrollWidth=body.scrollWidth;
bodyScrollHeight=body.scrollHeight;
if(bodyOffsetHeight > pageDimensions[0])
{
pageDimensions[0]=bodyOffsetHeight;
}
if(bodyOffsetWidth > pageDimensions[1])
{
pageDimensions[1]=bodyOffsetWidth;
}
if(bodyScrollHeight > pageDimensions[0])
{
pageDimensions[0]=bodyScrollHeight;
}
if(bodyScrollWidth > pageDimensions[1])
{
pageDimensions[1]=bodyScrollWidth;
}
return pageDimensions;
}
三、页面上必须放置一个div,作为遮罩层,下面是这个遮罩层的css样式。
复制代码 代码如下:
.lockDiv
{
position:absolute;
left:0;
top:0;
height:0;
width:0;
border:2 solid red;
display:none;
text-align:center;
background-color:#DBDBDB;
filter:Alpha(opacity=60);
}
四、在客户端使用下面的javascript用遮罩层将整个页面封闭。
复制代码 代码如下:
var sandglassSpan = 1;
var timeHdl;
function DisablePage()
{
var ctrlSandglass = document.getElementById("divSandglass");
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl);
ctrlSandglass.style.display = "none";
document.body.style.cursor = 'auto';
sandglassSpan = 1;
}
else
{
document.body.style.cursor = 'wait';
var pageDimensions = getPageSize();
ctrlSandglass.style.top = 0;
ctrlSandglass.style.left = 0;
ctrlSandglass.style.height = pageDimensions[0];
ctrlSandglass.style.width = pageDimensions[1];
ctrlSandglass.style.display = "block";
timeHdl = window.setTimeout(DisablePage,200);
}
}
五、如果页面上使用了ASP.net的Validator控件,那么应该使用如下的javascript。
复制代码 代码如下:
var sandglassSpan = 1;
var timeHdl;
function DisablePageHaveValidator()
{
var ctrlSandglass = document.getElementById("divSandglass");
if(false == Page_IsValid)
{
sandglassSpan = 0;
}
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl);
ctrlSandglass.style.display = "none";
document.body.style.cursor = 'auto';
sandglassSpan = 1;
}
else
{
document.body.style.cursor = 'wait';
ctrlSandglass.style.display = "block";
var pageDimensions = getPageSize();
ctrlSandglass.style.top = 0;
ctrlSandglass.style.left = 0;
ctrlSandglass.style.height = pageDimensions[0];
ctrlSandglass.style.width = pageDimensions[1];
timeHdl = window.setTimeout(DisablePageHaveValidator, 200);
}
}
六、DisablePage和DisablePageHaveValidator这两个方法可以在按钮的onclick事件或其它时机调用。
分享到:
相关推荐
在实际工作的项目中,经常会用到颜色的转换,一般是 RGBA(三原色+透明度) 转换为 十六进制颜色,或者十六进制颜色转换为 RGBA,此工具提供了 JavaScript 实现的双向转换的方法工具。
可实现div背景色半透明,不是用的filter:alpha(opacity=50);opacity:0.5;属性,而是用的rgba(0,0,0,0.5),如果用的filter:alpha(opacity=50);opacity:0.5;那么它有个缺点,就是这个div里边的所有子元素也会有半透明...
RGBA 颜色混合模型的介绍,文章比较老,但讲的比较实用,在看层图栅格化的时候对理解反走很有帮助
热力图 真彩色 rgba颜色码 16进制颜色码
颜色转换(16进制与rgb之间的相互转换,可自定义透明度rgba) 小程序适用。在小程序中使用时,请释放后尾的注释,文档中有说明。
16进制和rgba、rgb颜色的相互转换,例如#fffff可转换成rgba(255,255,255,1),或者rgba(255,255,255)。可自定义透明度。
颜色拾取器,用qt写的,更改dialog样式、设置exe图标、颜色转换,自定义事件, 点击获取,再点击界面的任何一个地方,保持按压状态,移到哪里,哪里就会有实时的颜色预览。以及RGBA格式和16进制格式输出
IE浏览器支持RGBa的背景色.docx
CSS3之前渐变色图片只能用背景图片 CSS3的渐变色语法可以让我们省去下载图片的开销 并且在改变浏览器分辨率时有更好的效果 颜色值RGBA 我们熟悉的rgb颜色标准,是由r(red)...例子2、使用rgba 红色半透明效果 .demo {
RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的: 复制代码代码如下: div { background: rgba(200, 54, 54, 0.5); } 它允许我们为元素添加透明色。或许我们习惯了使用”opacity“,它很简单...
CMB2 RGBa 取色器 一个用于的 RGBa 颜色选择,我找不到,所以我做了这个插件,仅此。 非常感谢的 JS。 用法 array( 'name' => __( 'RGBa Colorpicker', 'cmb2' ), 'desc' => __( 'Field description (optional)'...
易语言RGB颜色转换源码,RGB颜色转换,十六到十,Rgb2Int,RGBA2Int,Blue,Green,Red,Alpha,toHex_BGR,toHex_RGB,Hex2Int
rgba 到浮动 将 RGBA 颜色打包为 ABGR 编码的浮点数。 这在 WebGL 中用于将颜色数据交错到 Float32Array 中很有用,但仅对 RGBA 使用单个浮点数。 var pack = require ( 'rgba-to-float' )//packs RGBA into a float...
因为本人用的是MCU,没使用linux或者andriod等系统,要做图片的透明叠加效果,在网上各种找PNG转565rgba和888rgba的工具软件,找了好久都一直找不到,实在没办法自己写了一个,用在本人的实际项目中。可以选择转换成...
1.针对IE浏览器 复制代码代码如下: .demo{ background-color:transparent; filter:progid:...–背景透明–> color:#fff;<!–字体颜色–> background-color:rgba(255,255,255,0.15)<!–最后一个参数设置透
颜色-rgba 将颜色字符串转换为具有 rgba 通道值的数组: "rgba(127,127,127,.1)" → [127,127,127,.1] 。用法 const rgba = require ( 'color-rgba' )rgba ( 'red' ) // [255, 0, 0, 1]rgba ( 'rgb(80, 120, 160)' )...
rgba()是css3的新属性,所以IE8及以下浏览器不兼容,这怎么办呢?终于我找到了解决办法。 解决办法 我们先来解释以下rgba rgba: rgba的含义,r代表red,g代表green,b代表blue,a代表透明度。 rgba(0,0,0,.5) 这样...
RGBA8888转换为YUV NV21格式的几种算法
实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性。 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rgba属性之间...
基于.net Framework 4.6.2开发的一款绿色工具软件,可根据自定义的RGBA颜色转换到相近的RGB颜色,自动标识其十六进制形式,并给出相应的颜色预览效果。本软件可供前端UI开发人员使用,方便、快捷且直观。