HTML滤镜效果

最新推荐文章于 2024-05-13 17:48:02 发布

hmlong114

最新推荐文章于 2024-05-13 17:48:02 发布

阅读量246

点赞数

文章标签： HTML XHTML

本文链接：https://blog.csdn.net/hmlong114/article/details/83674037

版权

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>alpha滤镜</title>
</head>
<body>
<div id="Layer1" style="position:absolute;visibility:hidden;background-color:#333333;z-index:0;filter:Alpha(opacity=0);opacity:0.0;top:0px;left:0px;width:100%;height:100;">
<p align="center"><input type="button" name="Submit" value="alpha滤镜按钮" οnclick="alpha0()" /></p>
<iframe id="coveriframe" frameborder="0" width="100%" height="100" src="about:blank"></iframe>
</div>
<table width="500" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#000000">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<tr>
<td align="center"><input type="button" name="Submit" value="alpha滤镜按钮" οnclick="alpha50()" /></td>
</tr>
<tr>
<td align="center"><input type="submit" name="Submit3" value="提交" /></td>
</tr>
</form>
</table>
</body>
</html>
<script language="javascript">
var coveriframe;
coveriframe = document.getElementById("coveriframe").contentWindow;
coveriframe.document.open();//打开文档流
coveriframe.document.writeln('<html><head>');
coveriframe.document.writeln("</head><body></body></html>");
coveriframe.document.body.style.backgroundColor="#333333";
coveriframe.document.close();
if(document.body.scrollHeight>window.screen.availHeight){
document.getElementById("coveriframe").height=document.body.scrollHeight;
}else{
document.getElementById("coveriframe").height=window.screen.availHeight;
}

function alpha50(){
opa=Number(document.getElementById("Layer1").style.opacity);
opa=opa+(5/100);
document.getElementById("Layer1").style.visibility="visible";
document.getElementById("Layer1").style.filter="Alpha(opacity="+opa*100+")";
document.getElementById("Layer1").style.opacity=opa;
if(opa<=50/100){
setTimeout("alpha50()",100);
}
}
function alpha0(){
opa=Number(document.getElementById("Layer1").style.opacity);
opa=opa-(5/100);
document.getElementById("Layer1").style.filter="Alpha(opacity="+opa*100+")";
document.getElementById("Layer1").style.opacity=opa;
if(opa>=0){
setTimeout("alpha0()",100);
}else{
document.getElementById("Layer1").style.visibility="hidden";
}
}
</script>