求CSS加遮罩的操作方法

html-css014

求CSS加遮罩的操作方法,第1张

具体解决方案如下:

一、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)

}

}

如何使用CSS来修改SVG原点和制作SVG动画 SVG元素可以像HTML元素一样,使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。 SVG元素可以像HTML元素一样,使用CSS keyframes和animation属性或者CSS transitions来制作各种动...

HTML(超文本标记语言)和CSS(级联样式表)是用于构建Web页面的两项核心技术。HTML为各种设备提供页面的结构,为CSS提供(视觉和听觉的)布局。与图形和脚本一起,HTML和CSS是构建网页和 Web应用程序的基础。

HTML称为超文本标签语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

扩展资料:

CSS具有以下特点:

1、丰富的样式定义

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

3、多页面应用

CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

参考资料:百度百科——HTML

百度百科——css