工具:电脑;浏览器;ultraedit软件;
操作步骤如下:
1、打开UE编辑器,新建一个空白的html文件和css文件;
2、在html文件中输入以下html代码;
3、在css文件中输入以下css代码;
4、编辑完成之后,选择格式为UTF8-无 BOM模式,保存文件;
5、在浏览器中打开此html文件,可以看到最终想要实现的遮住全屏效果。
具体解决方案如下:一、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)
}
}
<div id="div1"><img src=""><img src="">
</div>
var imgList=document.getElementsByTagName("img")
for(var i=0i<ingList.lengthi++){
ingList[i].onclick=function(){
this.style.position="fixed"
this.style.width="800px"
this.style.top="200px"
}
}
这只是图片放大,,你说的左右移动的那种,要俩个按钮,然后换放大图片的对象就行。