matthew Zhang

慢慢学习,慢慢进步!
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

仿163点击黑屏效果

Posted on 2008-10-29 23:08  matthewZhang  阅读(150)  评论(0编辑  收藏  举报

 

效果1:

<html>
<head>
</head>
<body>
<script>
function show(){
document.all.ly.style.display
="block";
document.all.ly.style.width
=document.body.clientWidth;
document.all.ly.style.height
=document.body.clientHeight;
document.all.Layer2.style.display
='block';
}
</script>
<a href="<a href="http://www.rayidea.net" target="_blank">http://www.rayidea.net</a>"><img src="<a href="http://www.rayidea.net" target="_blank">http://www.rayidea.net</a>/images/logo.gif" ></a>">

<INPUT TYPE="button" value=" 显 示 " onclick="show()">
<div id="ly" style="position:absolute;top:0px;FILTER: alpha(opacity=60);background-color:#777; z-index:2; left: 0px;display:none;"> </div>

<!-- 浮层框架开始 -->
<div id="Layer2" align="center" style="position:absolute; z-index:3; width: 540; height:170px;left:expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/2);background-color:#fff;display:none;" valign="center">
<TABLE width=540 height=170 border=1 cellpadding=0 cellspacing=0 style="border:1px solid #e7e3e7;border-collapse: collapse;">
<TR>
<TD style="background-color:#73A2d6;color:#fff;padding-left:4px;padding-top:2px;font-weight:bold;font-size:14px;" height=27 valign="center">[ 警 告 ]</TD>
</TR>
<TR>
<TD align="center" valign="center">对不起 出错了</TD>
</TR>
<TR>
<TD style="background-color:#f7f7f7;" height=30 align="center"><INPUT TYPE="button" value=" 确 定 " onclick="document.all.ly.style.display='none';document.all.Layer2.style.display='none';"></TD>
</TR>
</TABLE>

</div>
<!-- 浮层框架结束 -->
</body>
</html>

效果2:
<style>
a.aa:link
{text-decoration:none;color:red}
a.aa:hover
{text-decoration:none;color:red}
</style>
<body topmargin=0 leftmargin=0>
<div id="d" style="position:absolute;z-index:1;filter:alpha(opacity=0);background-color:#000000;visibility:hidden"><span style="position:relative">
<!--<center><br><br><br><br><br><br>
<table width=200 height=150 border=1 bordercolor="#000000" style="border-collapse:collapse;background-color:#FFFFFF">
<tr><td valign=middle align=center style="color:red" height=25>123131312</td></tr>
<tr><td valign=middle align=center><a href="javascript:;" onClick="hide()" class="aa" style="color:#000000">关闭</a></td></tr>
</table>
</center>
--></span>
</div>
<!-- 浮层框架开始 -->
<div id="Layer2" align="center" style="position:absolute; z-index:3; width: 540; height:170px;left:expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/2);background-color:#fff;display:none;" valign="center">
<TABLE width=540 height=170 border=1 cellpadding=0 cellspacing=0 style="border:1px solid #e7e3e7;border-collapse: collapse;">
<TR>
<TD style="background-color:#73A2d6;color:#fff;padding-left:4px;padding-top:2px;font-weight:bold;font-size:14px;" height=27 valign="center">[ 警 告 ]</TD>
</TR>
<TR>
<TD align="center" valign="center">对不起 出错了</TD>
</TR>
<TR>
<TD style="background-color:#f7f7f7;" height=30 align="center"><INPUT TYPE="button" value=" 确 定 " onClick="hide()"></TD>
</TR>
</TABLE>

</div>
<!-- 浮层框架结束 -->
<li><a href="javascript:;" onClick="show()">查看</a>
<script>
var obj=document.getElementById("d")
var t=new Object();
function show(){
obj.style.visibility
="visible";
obj.style.width
=document.body.clientWidth;
obj.style.height
=document.body.clientHeight;
document.all.Layer2.style.display
='block';
if(obj.filters.alpha.opacity>25){
obj.filters.alpha.opacity
=25;
clearTimeout(t.timer1);
return;
}
else{
obj.filters.alpha.opacity
+=2;
t.timer1
=setTimeout("show()",10)
}
return;
}
function hide(){
if(obj.filters.alpha.opacity<=0){
obj.filters.alpha.opacity
=0;
obj.style.visibility
="hidden"
document.all.Layer2.style.display
='none';
clearTimeout(t.timer2)
return;
}
else{
obj.filters.alpha.opacity
-=2;
t.timer2
=setTimeout("hide()",5);
}
return;
}
</script>
</body>

效果3:
<style>
a.aa:link
{text-decoration:none;color:red}
a.aa:hover
{text-decoration:none;color:red}
</style>
<body topmargin=0 leftmargin=0>
<div id="d" style="position:absolute;z-index:9999;filter:alpha(opacity=0);background-color:#000000;visibility:hidden"><span style="position:relative">
<center><br><br><br><br><br><br>
<table width=200 height=150 border=1 bordercolor="#000000" style="border-collapse:collapse;background-color:#FFFFFF">
<tr><td valign=middle align=center style="color:red" height=25>123131312</td></tr>
<tr><td valign=middle align=center><a href="javascript:;" onClick="hide()" class="aa" style="color:#000000">关闭</a></td></tr>
</table>
</center></span>
</div>
<li><a href="javascript:;" onClick="show()">查看</a>
<script>
var obj=document.getElementById("d")
var t=new Object();
function show(){
obj.style.visibility
="visible";
obj.style.width
=document.body.clientWidth;
obj.style.height
=document.body.clientHeight;
if(obj.filters.alpha.opacity>25){
obj.filters.alpha.opacity
=25;
clearTimeout(t.timer1);
return;
}
else{
obj.filters.alpha.opacity
+=2;
t.timer1
=setTimeout("show()",10)
}
return;
}
function hide(){
if(obj.filters.alpha.opacity<=0){
obj.filters.alpha.opacity
=0;
obj.style.visibility
="hidden"
clearTimeout(t.timer2)
return;
}
else{
obj.filters.alpha.opacity
-=2;
t.timer2
=setTimeout("hide()",5);
}
return;
}
</script>
</body>