网页打开时显示一个全屏的层,几秒钟后该层隐藏要怎么才能实现?

有客户要求其网站首页打开时有一个全屏动画,动画播放完毕后显示网页的主体内容,要求是不能使用转跳页,所以只能用层来实现.
要求:1.打开网页时该层全屏(浏览器窗口)显示
2.动画播放完毕后该层隐藏.(时间和动画不用考虑)

下面是我找到的代码但测试不行,可能我是水平有问题吧.如果按照下面的思路,请帮忙把代码补全,如果你有新的思路帮忙贴出来,谢谢.

<script type="text/javascript"> 

function getWidth() 

{ 

    var strWidth,clientWidth,bodyWidth; 

    clientWidth = document.documentElement.clientWidth; 

    bodyWidth = document.body.clientWidth; 

    if(bodyWidth > clientWidth){ 

        strWidth = bodyWidth + 20; 

    } else { 

        strWidth = clientWidth; 

    } 

    return strWidth; 

} 

//获取高度 

function getHeight() 

{ 

    var strHeight,clientHeight,bodyHeight; 

    clientHeight = document.documentElement.clientHeight; 

    bodyHeight = document.body.clientHeight; 

    if(bodyHeight > clientHeight){ 

        strHeight = bodyHeight + 30; 

    } else { 

        strHeight = clientHeight; 

    } 

    return strHeight; 

} 


function showScreen() 

{ 

    var Element = document.getElementById('Message'); 

    var Elements = document.getElementById('Screen'); 

    Elements.style.width = getWidth(); 

    Elements.style.height = getHeight(); 

    Element.style.display = 'block'; 

    Elements.style.display = 'block'; 

} 

function hideScreen() 

{ 

    var Element = document.getElementById('Message'); 

    var Elements = document.getElementById('Screen'); 

    Element.style.display = 'none'; 

    Elements.style.display = 'none'; 

} 

</script>

12 个解决方案

#1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
html,body{font-size:12px;margin:0px;height:100%;}
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
var isIe=(document.all)?true:false;
//设置select的可见状态
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";
back.style.cssText=styleStr;
document.body.appendChild(back);
//var mesW=document.createElement("div");
//mesW.id="mesWindow";
//mesW.className="mesWindow";
//mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";

styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
//mesW.style.cssText=styleStr;
//document.body.appendChild(mesW);
setTimeout(function(){closeWindow()},3000);
}
function showBackground(obj,endInt)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){showBackground(obj,endInt)},8);
}
}
//关闭窗口
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}

if(isIe){
setSelectState('');}
}
//测试弹出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";
showMessageBox('窗口标题',messContent,objPos,350);
}
</script>
</head>
<body onload="testMessageBox(event);">
<div style="padding:20px">
<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<div style="text-align:left;padding-left:20px;padding-top:10px";>屏幕用一个灰色的层遮住, 使其不能操作,几秒钟后该层消失, 又能操作了</div>
<div style="text-align:left;padding-left:20px;padding-top:10px";>以前是一个弹出窗口遮盖功能,改下代码后就变成现在这个样</div>
</div>
</body>
</html>

#2

用setTimeout函数:多少毫秒后执行另一个函数
如:
setTimeout("scrollStar()",50);
经过50函数后执行scrollStar()

scrollStar()函数体.编写相应的div层设置display:none

#3

试试setTimeout(hideScreen, time);

#4

这个是原版,会弹出一个窗口, 你的动画放在这个弹出DIV里就可以了.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
html,body{font-size:12px;margin:0px;height:100%;}
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
var isIe=(document.all)?true:false;
//设置select的可见状态
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";
back.style.cssText=styleStr;
document.body.appendChild(back);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";

styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
function showBackground(obj,endInt)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){showBackground(obj,endInt)},8);
}
}
//关闭窗口
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}

if(isIe){
setSelectState('');}
}
//测试弹出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";
showMessageBox('窗口标题',messContent,objPos,350);
}
</script>
</head>
<body>
<div style="padding:20px">
<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<div style="text-align:left;padding-left:20px;padding-top:10px";><select><option>下拉</option></select>弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框</div>
<div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
<div style="text-align:right";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>
</div>
</body>
</html>

#5

感谢二楼,代码测试OK改了透明度和时间一样可以用.但是代码太复杂,有的地方我不是很明白.
最好是使用我贴出的代码,使用Settimeout的方法

#6

<!DOCTYPE html PUBaC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dd</title>
<style>
*{ margin:0;}
#Message { background-color:#CCCCCC;}
</style>
<script type="text/javascript">
function getWidth()
{
    var strWidth,clientWidth,bodyWidth;
    clientWidth = document.documentElement.clientWidth;
    bodyWidth = document.body.clientWidth;
    if(bodyWidth > clientWidth){
        strWidth = bodyWidth + 20;
    } else {
        strWidth = clientWidth;
    }
    return strWidth;
}
//获取高度
function getHeight()
{
    var strHeight,clientHeight,bodyHeight;
    clientHeight = document.documentElement.clientHeight;
    bodyHeight = document.body.clientHeight;
    if(bodyHeight > clientHeight){
        strHeight = bodyHeight + 30;
    } else {
        strHeight = clientHeight;
    }
    return strHeight;
}

function showScreen()
{
    var Element = document.getElementById('Message');
    var Elements = document.getElementById('Screen');
    Elements.style.width = getWidth();
    Elements.style.height = getHeight();
    Element.style.display = 'block';
    Elements.style.display = 'block';
setTimeout(function(){hideScreen()},2000);
}
function hideScreen()
{
    var Element = document.getElementById('Message');
    var Elements = document.getElementById('Screen');
    Element.style.display = 'none';
    Elements.style.display = 'none';
}
</script>
</head>

<body onload="showScreen()">
<div id="Message">
<div id="Screen">用你的代码做了一个, 试试效果</div>
</div>
</body>
</body>
</html>

#7

哈哈,我忽然发现这个论坛的"将贴子提前"这个功能就是我想要的类似谁帮忙把它摘出来.

#8

晕倒~~~~ "将贴子提前" 这个功能就是我那个代码....

样式要自己调整的呀

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style>
html,body{font-size:12px;margin:0px;height:100%;}
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
var isIe=(document.all)?true:false;
//设置select的可见状态
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i <objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";
back.style.cssText=styleStr;
document.body.appendChild(back);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML=" <div class='mesWindowTop'> <table width='100%' height='100%'> <tr> <td>"+wTitle+" </td> <td style='width:1px;'> <input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /> </td> </tr> </table> </div> <div class='mesWindowContent' id='mesWindowContent'>"+content+" </div> <div class='mesWindowBottom'> </div>";

styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
function showBackground(obj,endInt)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity <endInt)
{
setTimeout(function(){showBackground(obj,endInt)},8);
}
}
//关闭窗口
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}

if(isIe){
setSelectState('');}
}
//测试弹出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent=" <div style='padding:20px 0 20px 0;text-align:center'>消息正文 </div>";
showMessageBox('窗口标题',messContent,objPos,350);
}
</script>
</head>
<body>
<div style="padding:20px">
<div style="text-align:left";> <a href="#none" onclick="testMessageBox(event);">弹出窗口 </a> </div>
<div style="text-align:left;padding-left:20px;padding-top:10px";> <select> <option>下拉 </option> </select>弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框 </div>
<div style="text-align:center";> <a href="#none" onclick="testMessageBox(event);">弹出窗口 </a> </div>
<div style="text-align:right";> <a href="#none" onclick="testMessageBox(event);">弹出窗口 </a> </div>
</div>
</body>
</html>

#9

Cyril_Tam你的修改不错,我一看就明白.但是能不能把"message"上下和水平居中显示呢?

#10

<!DOCTYPE html PUBaC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dd</title>
<style>
*{ margin:0;}
#Message { background-color:#CCCCCC;}
#Screen{ background-color:red;}
</style>
<script type="text/javascript">
function getWidth()
{
    var strWidth,clientWidth,bodyWidth;
    clientWidth = document.documentElement.clientWidth;
    bodyWidth = document.body.clientWidth;
    if(bodyWidth > clientWidth){
        strWidth = bodyWidth + 20;
    } else {
        strWidth = clientWidth;
    }
    return strWidth;
}
//获取高度
function getHeight()
{
    var strHeight,clientHeight,bodyHeight;
    clientHeight = document.documentElement.clientHeight;
    bodyHeight = document.body.clientHeight;
    if(bodyHeight > clientHeight){
        strHeight = bodyHeight + 30;
    } else {
        strHeight = clientHeight;
    }
    return strHeight;
}

function showScreen()
{
    var Element = document.getElementById('Message');
    var Elements = document.getElementById('Screen');
/*修改部份*/
    Element.style.width = getWidth();
    Element.style.height = getHeight();

Elements.style.width = 500;
    Elements.style.height = 400;
Elements.style.position = "absolute";
Elements.style.top = (getHeight() - 400)/2;
Elements.style.left = (getWidth() - 500)/2;

/*修改部份*/

    Element.style.display = 'block';
    Elements.style.display = 'block';
//setTimeout(function(){hideScreen()},2000);
}
function hideScreen()
{
    var Element = document.getElementById('Message');
    var Elements = document.getElementById('Screen');
    Element.style.display = 'none';
    Elements.style.display = 'none';
}
</script>
</head>

<body onload="showScreen()">
<div id="Message">
<div id="Screen">用你的代码做了一个, 试试效果</div>
</div>
</body>
</body>
</html>

#11

记得把上面代码setTimeout(function(){hideScreen()},2000); 前的注释去掉

#12

OK,感谢Cyril_Tam,IE7 火狐3测试通过.非常感谢.

#1

#2

用setTimeout函数:多少毫秒后执行另一个函数
如:
setTimeout("scrollStar()",50);
经过50函数后执行scrollStar()

scrollStar()函数体.编写相应的div层设置display:none

#3

试试setTimeout(hideScreen, time);

#4

#5

感谢二楼,代码测试OK改了透明度和时间一样可以用.但是代码太复杂,有的地方我不是很明白.
最好是使用我贴出的代码,使用Settimeout的方法

#6

#7

哈哈,我忽然发现这个论坛的"将贴子提前"这个功能就是我想要的类似谁帮忙把它摘出来.

#8

#9

Cyril_Tam你的修改不错,我一看就明白.但是能不能把"message"上下和水平居中显示呢?

#10

<!DOCTYPE html PUBaC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dd</title>
<style>
*{ margin:0;}
#Message { background-color:#CCCCCC;}
#Screen{ background-color:red;}
</style>
<script type="text/javascript">
function getWidth()
{
    var strWidth,clientWidth,bodyWidth;
    clientWidth = document.documentElement.clientWidth;
    bodyWidth = document.body.clientWidth;
    if(bodyWidth > clientWidth){
        strWidth = bodyWidth + 20;
    } else {
        strWidth = clientWidth;
    }
    return strWidth;
}
//获取高度
function getHeight()
{
    var strHeight,clientHeight,bodyHeight;
    clientHeight = document.documentElement.clientHeight;
    bodyHeight = document.body.clientHeight;
    if(bodyHeight > clientHeight){
        strHeight = bodyHeight + 30;
    } else {
        strHeight = clientHeight;
    }
    return strHeight;
}

function showScreen()
{
    var Element = document.getElementById('Message');
    var Elements = document.getElementById('Screen');
/*修改部份*/
    Element.style.width = getWidth();
    Element.style.height = getHeight();

Elements.style.width = 500;
    Elements.style.height = 400;
Elements.style.position = "absolute";
Elements.style.top = (getHeight() - 400)/2;
Elements.style.left = (getWidth() - 500)/2;

/*修改部份*/

    Element.style.display = 'block';
    Elements.style.display = 'block';
//setTimeout(function(){hideScreen()},2000);
}
function hideScreen()
{
    var Element = document.getElementById('Message');
    var Elements = document.getElementById('Screen');
    Element.style.display = 'none';
    Elements.style.display = 'none';
}
</script>
</head>

<body onload="showScreen()">
<div id="Message">
<div id="Screen">用你的代码做了一个, 试试效果</div>
</div>
</body>
</body>
</html>

#11

记得把上面代码setTimeout(function(){hideScreen()},2000); 前的注释去掉

#12

OK,感谢Cyril_Tam,IE7 火狐3测试通过.非常感谢.

秒客网

网页打开时显示一个全屏的层,几秒钟后该层隐藏要怎么才能实现?

12 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

相关文章