网页蒙砂效果2

最新推荐文章于 2021-09-08 15:02:30 发布

原创最新推荐文章于 2021-09-08 15:02:30 发布 · 948 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用JavaScript来控制网页元素显示与隐藏的方法。通过两个函数my_xianshi和my_yincang实现了指定div的显示与隐藏效果，并通过创建背景遮罩增强了用户体验。文中展示了具体的JavaScript代码及HTML结构。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

function my_yincang(check_div){
var mydiv=document.getElementById(check_div);
mydiv.style.display="none";
var bw=document.getElementById("my_bgDiv");
document.body.removeChild(bw);

}
function my_xianshi(play){
var mydiv=document.getElementById(play);
mydiv.style.display="";
//mydiv.style.top=(document.body.offsetHeight-350)/2+"px";
//mydiv.style.top=(document.body.clientHeight-350)/2+document.body.scrollTop+"px";
mydiv.style.top=document.documentElement.scrollTop+100+"px";
mydiv.style.left=(document.body.clientWidth-700)/2+"px";
var My_bgObj=document.createElement("div");
My_bgObj.setAttribute('id','my_bgDiv');
My_bgObj.style.position="absolute";
My_bgObj.style.top="0";
My_bgObj.style.background="#777";
My_bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
My_bgObj.style.opacity="0.6";
My_bgObj.style.left="0";
My_bgObj.style.zIndex=2;
My_bgObj.style.width=document.body.clientWidth+"px";
My_bgObj.style.height=document.body.clientHeight+"px";
document.body.appendChild(My_bgObj);
}
</SCRIPT>

</head>
<body>
<input type="button" value="显示" onClick="my_xianshi('hhh')"/>
<input type="button" value="隐藏" onClick="my_yincang('hhh')"/>

<div style="background-color:#0033FF; width:500px; height:500px; z-index:10; display:none;position: absolute;" id="hhh"></div>

</body>
</html>