效果：
<!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=utf-8" />
<title>loading demo</title>
<script type="text/javascript">
function show(){
var loadbox =document.getElementById("loadlayer");
var overlayer = document.getElementById("overlayer");
loadbox.style.display = "block" ;
overlayer.style.display = "block" ;
}
function hide(){
var loadbox =document.getElementById("loadlayer");
var overlayer = document.getElementById("overlayer");
loadbox.style.display = "none" ;
overlayer.style.display = "none" ;
}
</script>
<style type="text/css">
#overlayer{
position: absolute;
top: 50px;
left: 0;
z-index: 90;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
display:none;
}
#loadbox{
position: absolute;
top: 40%;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
}
#loadlayer{
display:none;
}
</style>
</head>
<body>
<div id="overlayer"></div>
<div id="loadbox" >
<div id="loadlayer">
<img src="loading.gif" />
</div>
</div>
<div id="containlayer">
<input type="button" value="show" onclick="show()" />
<input type="button" value="hide" onclick="hide()"/>
<br />
<br />
--------------------------------------------------------------------<br />
--------------------------------------------------------------------<br />
这段代码是通过lightbox2.02的源代码里面学习来的,主要要注意的地方是如果用overlayer包裹
loadlayer层的话,loadlayer层会继承overlayer层的透明属性,而且这种继承后的透明属性很难屏蔽掉,
比如在loadlayer上重新定义透明,新定义的透明不会有预期的效果.所以处理的时候必须要overlayer
与loadbox分离来,单独来处理就不会出现上面的情况了.
具体的网页内容.写在这里,上面通过一个半透明层遮蔽下面的内容<br />
</div>
</body>
</html>
- 大小: 27 KB
分享到：
相关推荐
以上是一个基础的JS遮蔽层实现。然而，实际项目中可能会更复杂，包括动画效果、键盘交互、自动关闭计时器等。例如，可以使用jQuery库简化DOM操作，或者引入专门的模态库如Bootstrap Modal或SweetAlert2来增强功能和...
为了实现遮蔽层，我们通常会创建一个全屏的 `div`，并设置较低的不透明度（如 `opacity: 0.5`）和背景色（如 `background-color: rgba(0, 0, 0, 0.5)`），以达到半透明效果，从而让背景页面模糊可见。 在压缩包中的...
在"遮蔽层效果"这个主题中，我们将深入探讨遮蔽层的设计原则、实现方式以及在Web开发中的应用。 首先，遮蔽层的设计目标是创造一种半透明或者全屏覆盖的效果，使得用户能够意识到当前的操作区域或信息是有限的，...
在IT行业中，用户体验是至关重要的，而背景变暗弹出层和遮蔽层效果就是提升用户体验的一种常见技术。这些效果通常用于创建对话框、模态窗口或者提示信息，以吸引用户的注意力并提供交互式操作。下面我们将详细探讨...
在网页开发中，"js 实现div 遮蔽" 是一种常见的用户界面设计技术，主要目的是在执行耗时操作时防止用户意外交互，提供更好的用户体验。这种技术通常用于加载数据、提交表单或者进行其他可能阻塞界面的长时间运行过程...
在需要时调用这些方法，例如在开始执行长时间任务前显示遮蔽层，任务完成后隐藏。 5. **事件处理**： - 遮蔽窗体可能需要阻止用户与底层窗体的交互，这可以通过设置窗体的`TopMost`属性为`true`实现，使其始终位于...
在网页设计中，遮罩层（Mask Layer）是一种常见的交互元素，它用于在用户与页面交互时提供一...希望这个教程能帮助你理解和实现一个简单的移动端遮罩层。在实践中，不断探索和优化，你会发现更多有趣和实用的设计技巧。
Android PopupWindow 实现遮罩层效果 Android PopupWindow 是 Android 系统中的一种常用对话框组件，用于显示弹出式对话框，可以实现各种交互效果。今天，我们将详细介绍如何使用 Android PopupWindow 实现遮罩层...
这篇教程将详细介绍如何通过编程方式判断微信浏览器是否自动弹出遮罩层，并提供一个完整的代码实现。 首先，我们要理解微信浏览器的特性和它如何处理网页。微信内置的X5内核浏览器会检测页面中的一些特定事件或行为...
再者，随着技术的发展，一些创新的遮蔽方案也在不断涌现，如利用光学涂层、电致变色材料等技术实现摄像头的瞬间遮挡。这些新技术不仅提供了一种更为便捷的隐私保护方式，还有助于提升设备的整体科技感。 最后，报告...
在本文中，我们将深入探讨如何使用jQuery实现一个页面遮罩层功能。首先，我们需要了解页面遮罩层的作用，它通常用于在用户与页面其他部分交互时提供视觉反馈，例如加载数据或显示模态对话框时。遮罩层通过覆盖整个...
2. 电磁遮蔽材料的工作原理：解释如何通过反射、吸收和衰减电磁波来实现遮蔽效果。 3. 层状结构的优势：如何通过不同材料的组合优化电磁性能和热性能。 4. 均温设计的意义：如何通过均匀分布热量，防止过热导致的...
遮蔽层（Mask Layers）则包括阻焊层（Solder Mask）和锡膏层（Paste Mask），这些层有助于保护电路板上的焊盘不受污染，同时为自动化的电路板焊接提供便利。阻焊层通常涂覆在裸铜区域之外，以防止在焊接过程中焊料...
其次，蒙版遮蔽效果的实现关键在于创建一个与图片同大小的遮罩层（div标签），并且这个遮罩层默认是透明的。当用户将鼠标悬停在某个图片上时，通过jQuery的mouseover事件触发函数，可以改变当前图片遮罩层的透明度...
遮蔽层通常由导电材料制成，如铜或铝，它的目的是创建一个电磁屏蔽，阻止外部电磁干扰进入连接器内部，同时也防止内部信号对外部环境造成干扰。这在电子政务系统中尤为重要，因为这些系统往往处理大量敏感信息，包括...
1. **图形引擎支持**：实现镜头遮蔽和网络摄影功能需要强大的图形引擎支持，如Unity、Unreal Engine等，它们内置了丰富的图形处理工具和API，方便开发者进行自定义开发。 2. **网络同步**：在网络游戏中，确保所有...
5. 遮蔽层（Mask Layers） - 阻焊层（Solder Mask）：防止焊料覆盖不需要焊接的区域，防止短路。 - 锡膏层（Paste Mask）：定义锡膏印刷的位置，确保元器件精确贴装。 总的来说，PCB多层板的设计和制造涉及到信号...
遮蔽装置通常由金属外壳或屏蔽层构成，能够反射或吸收周围环境中的电磁辐射，降低EMI的影响。这种设计对于电子政务系统尤其重要，因为这些系统往往处理大量的敏感信息，如公民个人信息、政府内部数据等，任何数据的...
在这个项目中，自定义Drawable可能包含了一个可滚动的遮蔽层，当用户进行某种操作时，这个遮蔽层会以特定的方式展开或收缩，从而展现出下面的图片。 实现这种效果通常包括以下几个步骤： 1. **创建自定义Drawable*...
红外遮蔽诱饵及伪装陶瓷粉料行业是军事与安全领域中的关键技术之一，涉及的是如何在红外探测系统中实现目标的隐形与混淆。这一行业的战略分析与建议主要聚焦于企业在2021年至2026年期间如何在竞争激烈的市场环境中...