`

js实现 load mask

JavaScriptCSSHTML 
阅读更多

<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>

分享到：
| Java字符串 String
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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`文件则是快捷方式，指向其他相关的...

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

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

    Extjs的loading效果

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

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

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

    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()`方法来实现。例如，可以创建...

Magicbox
Global site tag (gtag.js) - Google Analytics