<html>
<head>
<script>
function test(){
document.getElementById("beyond_cover").style.display = "none";
};
function clickFunction(){
//遮罩div关键代码
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓关键在这里↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//absolute有时只作用于一屏，如有滚动条就会超出作用范围，建议用fixed
document.getElementById("cover").style.position = "absolute";
document.getElementById("cover").style.width = "100%";
document.getElementById("cover").style.height = "100%";
document.getElementById("cover").style.top = "0px";
document.getElementById("cover").style.left = "0px";
document.getElementById("cover").style.zIndex = "1";//z-index="1";
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑关键在这里↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//遮罩div可选代码(还可添加其他)
document.getElementById("cover").style.opacity = "0.2";
document.getElementById("cover").style.backgroundColor = "rgb(0,0,0)";
//额外扩展显示的内容,层级比遮罩层高
//absolute有时只作用于一屏，如有滚动条就会超出作用范围，建议用fixed
document.getElementById("beyond_cover").style.position = "absolute";
document.getElementById("beyond_cover").style.top = "30%";
document.getElementById("beyond_cover").style.left = "30%";
document.getElementById("beyond_cover").style.display = "block";
document.getElementById("beyond_cover").style.width = "45%";
document.getElementById("beyond_cover").style.height = "20%";
document.getElementById("beyond_cover").style.backgroundColor = "orange";
document.getElementById("beyond_cover").style.zIndex = "2";//z-index="2";
};
</script>
</head>
<body onload="test()">
<div><input type="text"/></div><div>1</div>
<div><input type="text"/></div><div>1+1=2</div>
<div><input type="text"/></div><div>1+1=2;1+2=3</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4;1+4=5</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4;1+4=5;1+5=6</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4;1+4=5;1+5=6;1+6=7</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4;1+4=5;1+5=6;1+6=7;1+7=8</div>
<div><input type="text"/></div><div>1+1=2;1+2=3;1+3=4;1+4=5;1+5=6;1+6=7;1+7=8;1+8=9</div>
<div><button onclick="clickFunction()">click me</button></div>
<!-- 创建一个用于遮罩的div -->
<div id='cover'></div>
<div id='beyond_cover' align='center'>
<h1>我是建立于遮罩效果之上的自定义内容</h1>
<h1>因此我的z-index要比遮罩层的z-index大</h1>
</div>
</body>
</html>
分享到：
相关推荐
简单的falsh遮罩效果，适用于初学者。通过对于代码的编写，是的鼠标经过的地方出现遮罩效果
在网页设计和开发中，遮罩效果是一种常用的技术，它能为页面增添视觉吸引力和交互性。"10种遮罩效果"这个主题涵盖了多种不同的遮罩应用方式，旨在提升用户体验和网页设计的艺术性。遮罩效果通常是通过CSS（层叠样式...
在Qt编程中，实现遮罩窗口（mask window）是...总的来说，Qt提供了丰富的工具和接口，使得创建具有遮罩效果的窗口变得简单易行。通过理解并运用上述技术，开发者可以轻松地为自己的应用程序添加美观且实用的遮罩功能。
例如，一款名为`jQuery.dialogBox`的插件，只需几行代码即可创建具有遮罩效果的弹出框，并支持自定义标题、内容、按钮等元素。 实现这些效果的具体步骤如下： 1. **HTML结构** 创建一个包含弹出框内容的元素，并...
本资源"又一款简单漂亮的CSS3图片悬停遮罩效果"就是这样的一个示例，它展示了如何通过CSS3实现一种巧妙的图片悬停时的遮罩效果，提升用户体验，同时也增强了页面的交互性。 首先，让我们理解什么是CSS3图片悬停遮罩...
在网页设计中，遮罩效果是一种常见的视觉呈现方式，它能为用户提供一种半透明的覆盖层，用于突出显示特定内容或执行某些交互操作。在这个"CSS+DIV+JQuery源码实现遮罩效果"的资源中，我们可以学习如何利用这三种技术...
在Android开发中，遮罩效果（Mask Effect）是一种常见的视觉设计技术，用于在特定区域上隐藏或显示内容，常用于创建各种动态效果，如按钮、加载动画、提示信息等。本篇文章将深入探讨如何在Android中实现圆形遮罩、...
以上是一个简单的JavaScript图片遮罩效果实现。在实际项目中，可能需要根据需求添加更多功能，如自适应屏幕尺寸、手势操作等。通过深入学习JavaScript和CSS，你可以创建出更加复杂且具有交互性的图片遮罩效果。记得...
纯CSS3实现的动画遮罩效果 当鼠标悬停在图片上，会从右上角一个沿着逆时针方向旋转过来的动画效果 鼠标移走后遮罩复位 使用方法： 1、将CSS样式拷贝过去 2、将index.html中的代码部分拷贝过去即可 ...
jQuery 教程：简单的遮罩弹窗效果 在网页设计中，遮罩弹窗效果是一种常见的交互设计，它能够使用户更加专注地查看或操作页面上的特定内容。比如，在QQ空间浏览相册时，背景会变为半透明，弹出一个中间的菜单。这种...
《jQuery弹出层插件：实现简单遮罩弹出框效果》 在Web开发中，弹出层（Modal）是一种常见的交互元素，用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库，提供了丰富的插件来...
"遮罩层效果（最新），简单易用"这个标题表明我们将探讨一种最新的、易于实施的遮罩层实现方法。这种效果能够覆盖在网页内容上，通常具有半透明背景，使得用户对主要信息或操作有更集中的注意力。 描述中提到"兼容...
"用遮罩效果做精美动感ppt文字特效模板.rar"这个压缩包文件提供了一种创新的方法来实现这一目标，主要利用了遮罩技术。下面我们将深入探讨遮罩效果以及如何在PowerPoint中创建流动字幕效果。 首先，遮罩是一种图形...
总的来说，遮罩效果是提升用户体验和视觉吸引力的重要手段，无论是在简单的网页设计还是复杂的交互应用中都有广泛的应用。掌握不同方法创建遮罩层，可以帮助开发者提高工作效率，同时也能丰富他们的设计工具箱。
总之，“JQUERY插件-蒙版遮罩效果-toggleLoading”是网页开发中的一个实用工具，它通过简单的API和丰富的定制选项，帮助开发者实现优雅的加载指示和用户体验。通过掌握和运用这个插件，可以提升网站的专业感和用户...
为了提高用户的等待体验，设计师们会采用CSS来创建各种各样的“等待遮罩”或“loading”效果。"CSS等待遮罩loading效果（多个）"是一个集合，包含了多个不同的CSS实现的加载动画，旨在为用户提供美观且不单调的加载...
Cesium地图反选遮罩，支持自定义遮罩颜色
在这个场景中，我们关注的是如何使用JavaScript来实现一个网页遮罩效果。网页遮罩通常用于在页面上创建一个半透明的覆盖层，以突出显示特定区域或阻止用户与背景内容交互，比如在加载新内容或弹出对话框时。 首先，...
2. **层叠上下文（Z-index）**：通过设置`z-index`属性，我们可以确保弹出框位于其他内容之上，形成遮罩效果。 3. **背景透明度（Opacity）**：利用`opacity`属性，我们可以创建一个半透明的遮罩层，覆盖整个页面，...
本话题将详细讲解“鼠标遮罩效果”在Flash中的实现和应用，以及如何利用源文件进行操作。 首先，我们要理解什么是“鼠标遮罩效果”。在Flash中，遮罩是一种特殊层，它可以隐藏其下方内容的部分或全部，只显示遮罩层...