`

js实现 load mask

阅读更多

<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实现的遮罩层

    本文将深入探讨如何使用JavaScript来实现一个基本的遮罩层功能。 首先,我们需要理解遮罩层的基本概念。遮罩层通常是一个全屏或半透明的元素,覆盖在网页内容之上,用于突出显示特定区域或信息。在HTML中,我们可以...

    extjs mask load

    至于“工具”,这可能是指开发者使用的一些辅助工具,比如调试器、IDE(集成开发环境)或者代码编辑器,帮助他们在ExtJS项目中实现和调试mask load功能。 压缩包中的“treegrid.doc”文件名表明,文档可能包含有关...

    【JavaScript源代码】JavaScript实现电商平台商品细节图.docx

    ### JavaScript 实现电商平台商品细节图知识点解析 #### 一、项目背景与应用场景 在现代电商平台上,为了提高用户体验,很多网站都提供了商品细节图展示功能。例如,在浏览某款手机时,用户可以通过鼠标悬停在商品...

    js加载等待效果,原理点击后创建层,onclick事件触发

    这里我们可以使用原生JavaScript或者jQuery等库来实现: **原生JavaScript:** ```javascript document.getElementById('load-btn').addEventListener('click', function() { var loadingMask = document....

    JS实现电商商品展示放大镜特效

    在本文中,我们将介绍如何使用JavaScript(JS)实现一个电商商品展示放大镜特效。这种特效可以使用户在浏览网页上的商品时,通过鼠标悬停在一个小的预览图上,来放大查看商品的细节图片。这种效果在很多电子商务网站...

    jsp页面加载之遮罩层

    压缩包中的`cover.js`文件很可能是实现遮罩层功能的JavaScript代码。通常,它会包含显示和隐藏遮罩层的函数,以及与页面加载或特定事件相关的逻辑。例如: ```javascript function showMask() { $('.mask').show()...

    jquery实现图片遮罩动画进渡提示特效

    最后,压缩包中的`index.html`文件可能是这个特效的完整示例,而`css`和`js`目录可能包含了实现此特效所需的样式表和脚本文件。`images`目录可能包含用于测试的图片资源,而`.url`文件则是快捷方式,指向其他相关的...

    Extjs的loading效果

    ExtJS是一个强大的JavaScript框架,用于构建富客户端应用程序。它提供了丰富的组件库和高级功能,其中包括加载(loading)效果。在本文中,我们将深入探讨如何利用ExtJS和CSS来实现加载时的缓冲效果。 一、ExtJS的...

    javascript实现uploadify上传格式以及个数限制

    在JavaScript中实现`uploadify`上传插件时,我们经常需要对上传的文件格式和数量进行限制,以确保用户按照预设规则提交文件。本文将详细介绍如何通过关键代码实现这一功能,特别关注`uploadify`插件的配置选项和事件...

    全屏loading图有遮罩效果 当显示全屏loading图时无法操作页面上的按钮

    实现全屏遮罩效果的方法多种多样,但通常涉及到HTML、CSS和JavaScript的配合。在HTML中,可以创建一个全屏的div元素作为遮罩层,并设置其CSS样式以覆盖整个屏幕。例如: ```html &lt;div id="loading-mask"&gt; ``` 接...

    python实现Alphapose骨骼关键点信息的提取

    本文将深入探讨如何使用Python来实现Alphapose骨骼关键点信息的提取,这是一个涉及到图像处理和计算机视觉的重要任务。Alphapose是一款高效且准确的多人姿态估计系统,它可以检测图像中人物的多个关节位置,为人体...

    css div实现的遮罩层完美兼容IE6-IE9 FireFox

    最后,我们可以根据需求通过JavaScript或jQuery来控制这两个div的显示和隐藏,以实现加载效果。例如,当数据加载时,显示遮罩层和加载提示,加载完毕后隐藏它们。 在IE6的环境下,由于其不支持CSS3和某些标准特性,...

    layui 实现加载动画以及非真实加载进度的方法

    总结,layui提供了一种简单的方式来实现加载动画和模拟加载进度,通过结合`layer.load()`、`setTimeout()`和JavaScript事件处理,我们可以创建出良好的用户体验。这种方法对于那些无法精确计算执行时间的操作非常...

    CSS3鼠标悬停图片遮罩层动画特效

    本文将深入探讨如何利用CSS3技术实现一款响应式的图片列表布局,当鼠标悬停在图片上时,会出现一个带有文字和图标的遮罩层,呈现出精美的动画效果。这一特效不仅增加了页面的互动性,还能有效吸引用户的注意力。 ##...

    jQuery插件大全

    6. **Ajax加载**:如jQuery Load和Ajaxify,能够实现页面内容的无刷新加载,提高用户体验。 7. **导航和菜单**:如jQuery Mega Menu和Nice Scroll,用于创建多功能、可定制的下拉菜单和滚动条。 8. **图库和相册**...

    Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    function load(){ $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); $("&lt;div class=\"datagrid-mask\"&gt;&lt;/div&gt;").css({display:"block", width:"100%", height:$(window).height()}).appendTo(...

    超好用的Jquery插件集合

    1. **Form Validation** - 这类插件如jQuery Validate,能够帮助开发者轻松实现表单验证,确保用户输入的数据符合预设规则,提高用户体验,防止无效数据提交。 2. **Ajax Form Submit** - 如jQuery Form Plugin,它...

    AngularJS使用拦截器实现的loading功能完整实例

    &lt;script type="text/javascript" src="angular-animate.js"&gt; ``` 接下来,我们创建一个名为`myApp`的AngularJS应用,并注入`ui.router`和`ngAnimate`模块作为依赖: ```javascript var myApp = angular.module('...

    2021-2022计算机二级等级考试试题及答案No.14779.docx

    12. 显示图片并实现超链接的控件:Image控件可以用来显示图片,同时可以设置超链接,选项B是正确的。 13. C语言表达式计算:表达式(float)(a+b)/2+(int)x%(int)y;中,a+b的结果是9,转换为float后除以2得到4.5,...

    jQuery遮罩Loading加载特效特效代码

    $(window).load(function() { $("#loading-mask").fadeOut(); }); }); ``` 4. **自定义加载动画**:如果你希望创建更具个性化的加载效果,可以使用CSS3动画或者jQuery的`.animate()`方法来实现。例如,可以创建...

Global site tag (gtag.js) - Google Analytics