<html>
<head>
<style type="text/css">
#mask {
position: absolute;
visibility: hidden;
background: #000;
z-index: 99999;
left: 0px;
top: 0px;
filter: alpha(opacity=80);
text-align: center;
}
</style>
<script type="text/javascript">
var o;
function showMask() {
o = document.getElementById("mask");
o.style.visibility = "visible";
o.style.height = window.screen.availHeight;
o.style.width = window.screen.availWidth;
o.style.zIndex = 10000;
o.style.display = 'block';
o.style.position = 'absolute';
o.style.filter = "alpha(opacity:50)";
o.style.KHTMLOpacity = 0.5;
o.style.MozOpacity = 0.5;
o.style.opacity = 0.5;
o.style.background = '#ccc';
}
function closeMask() {
o = document.getElementById("mask");
o.style.visibility = "hidden";
}
</script>
</head>
<body>
<div id="mask" style="padding-top:20%" ><input type="button" value="close" onclick="closeMask()" />
Loading...
</div>
<input type="button" value="showMask" onclick="showMask()" />
</body>
</html>
分享到:
相关推荐
本文将深入探讨如何使用JavaScript来实现一个基本的遮罩层功能。 首先,我们需要理解遮罩层的基本概念。遮罩层通常是一个全屏或半透明的元素,覆盖在网页内容之上,用于突出显示特定区域或信息。在HTML中,我们可以...
至于“工具”,这可能是指开发者使用的一些辅助工具,比如调试器、IDE(集成开发环境)或者代码编辑器,帮助他们在ExtJS项目中实现和调试mask load功能。 压缩包中的“treegrid.doc”文件名表明,文档可能包含有关...
### JavaScript 实现电商平台商品细节图知识点解析 #### 一、项目背景与应用场景 在现代电商平台上,为了提高用户体验,很多网站都提供了商品细节图展示功能。例如,在浏览某款手机时,用户可以通过鼠标悬停在商品...
这里我们可以使用原生JavaScript或者jQuery等库来实现: **原生JavaScript:** ```javascript document.getElementById('load-btn').addEventListener('click', function() { var loadingMask = document....
在本文中,我们将介绍如何使用JavaScript(JS)实现一个电商商品展示放大镜特效。这种特效可以使用户在浏览网页上的商品时,通过鼠标悬停在一个小的预览图上,来放大查看商品的细节图片。这种效果在很多电子商务网站...
压缩包中的`cover.js`文件很可能是实现遮罩层功能的JavaScript代码。通常,它会包含显示和隐藏遮罩层的函数,以及与页面加载或特定事件相关的逻辑。例如: ```javascript function showMask() { $('.mask').show()...
最后,压缩包中的`index.html`文件可能是这个特效的完整示例,而`css`和`js`目录可能包含了实现此特效所需的样式表和脚本文件。`images`目录可能包含用于测试的图片资源,而`.url`文件则是快捷方式,指向其他相关的...
ExtJS是一个强大的JavaScript框架,用于构建富客户端应用程序。它提供了丰富的组件库和高级功能,其中包括加载(loading)效果。在本文中,我们将深入探讨如何利用ExtJS和CSS来实现加载时的缓冲效果。 一、ExtJS的...
在JavaScript中实现`uploadify`上传插件时,我们经常需要对上传的文件格式和数量进行限制,以确保用户按照预设规则提交文件。本文将详细介绍如何通过关键代码实现这一功能,特别关注`uploadify`插件的配置选项和事件...
实现全屏遮罩效果的方法多种多样,但通常涉及到HTML、CSS和JavaScript的配合。在HTML中,可以创建一个全屏的div元素作为遮罩层,并设置其CSS样式以覆盖整个屏幕。例如: ```html <div id="loading-mask"> ``` 接...
本文将深入探讨如何使用Python来实现Alphapose骨骼关键点信息的提取,这是一个涉及到图像处理和计算机视觉的重要任务。Alphapose是一款高效且准确的多人姿态估计系统,它可以检测图像中人物的多个关节位置,为人体...
最后,我们可以根据需求通过JavaScript或jQuery来控制这两个div的显示和隐藏,以实现加载效果。例如,当数据加载时,显示遮罩层和加载提示,加载完毕后隐藏它们。 在IE6的环境下,由于其不支持CSS3和某些标准特性,...
总结,layui提供了一种简单的方式来实现加载动画和模拟加载进度,通过结合`layer.load()`、`setTimeout()`和JavaScript事件处理,我们可以创建出良好的用户体验。这种方法对于那些无法精确计算执行时间的操作非常...
本文将深入探讨如何利用CSS3技术实现一款响应式的图片列表布局,当鼠标悬停在图片上时,会出现一个带有文字和图标的遮罩层,呈现出精美的动画效果。这一特效不仅增加了页面的互动性,还能有效吸引用户的注意力。 ##...
6. **Ajax加载**:如jQuery Load和Ajaxify,能够实现页面内容的无刷新加载,提高用户体验。 7. **导航和菜单**:如jQuery Mega Menu和Nice Scroll,用于创建多功能、可定制的下拉菜单和滚动条。 8. **图库和相册**...
function load(){ $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); $("<div class=\"datagrid-mask\"></div>").css({display:"block", width:"100%", height:$(window).height()}).appendTo(...
1. **Form Validation** - 这类插件如jQuery Validate,能够帮助开发者轻松实现表单验证,确保用户输入的数据符合预设规则,提高用户体验,防止无效数据提交。 2. **Ajax Form Submit** - 如jQuery Form Plugin,它...
<script type="text/javascript" src="angular-animate.js"> ``` 接下来,我们创建一个名为`myApp`的AngularJS应用,并注入`ui.router`和`ngAnimate`模块作为依赖: ```javascript var myApp = angular.module('...
12. 显示图片并实现超链接的控件:Image控件可以用来显示图片,同时可以设置超链接,选项B是正确的。 13. C语言表达式计算:表达式(float)(a+b)/2+(int)x%(int)y;中,a+b的结果是9,转换为float后除以2得到4.5,...
$(window).load(function() { $("#loading-mask").fadeOut(); }); }); ``` 4. **自定义加载动画**:如果你希望创建更具个性化的加载效果,可以使用CSS3动画或者jQuery的`.animate()`方法来实现。例如,可以创建...