/**
* 遮罩
* 用法:objTools.loading();
* 关闭:$("#wbox_cover").remove();
* 注意:z-dindex:1000 设定可能造成全覆盖
*/
objTools = {
setPositionToCenter: function(node){
node.style.position = "absolute";
node.style.top = (objTools.getHeight() - node.offsetHeight) /2 + objTools.getTop() + "px";
node.style.left = (objTools.getWidth() - node.offsetWidth) / 2 + "px";
},
getScrollHeight: function(){
return Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
},
getWidth: function(){
var width=0;
if(document.documentElement && document.documentElement.clientWidth)
{
width=document.documentElement.clientWidth;
}
else if(document.body && document.body.clientWidth)
{
width=document.body.clientWidth;
}
else if(window.innerWidth)
{
width=window.innerWidth-18;
}
return width;
},
getHeight: function(){
var height=0;
if(window.innerHeight)
{
height=window.innerHeight-18;
}
else if(document.documentElement && document.documentElement.clientHeight)
{
height=document.documentElement.clientHeight;
}
else if(document.body && document.body.clientHeight)
{
height=document.body.clientHeight;
}
return height;
},
getTop: function(){
var scrollY=0;
if(document.documentElement && document.documentElement.scrollTop)
{
scrollY=document.documentElement.scrollTop;
}
else if(document.body && document.body.scrollTop)
{
scrollY=document.body.scrollTop;
}
else if(window.pageYOffset)
{
scrollY=window.pageYOffset;
}
else if(window.scrollY)
{
scrollY=window.scrollY;
}
return scrollY;
},
getLen: function(str){
var len = 0;
for (var i=0; i<str.length; i++) {
if (str.charCodeAt(i) > 127)
len += 2;
else
len++;
}
return len;
},
loading: function(){
var elemCover = document.createElement("div");
elemCover.id = "wbox_cover";
elemCover.style.position = "absolute";
elemCover.style.backgroundColor = "#000";
elemCover.style.opacity = "0.3";
elemCover.style.filter = "alpha(opacity=30)";
elemCover.style.top = 0;
elemCover.style.left = 0;
elemCover.style.width = "100%";
elemCover.style.zIndex = 1000;
elemCover.style.height = objTools.getScrollHeight() + "px";
document.body.appendChild(elemCover);
}
};
分享到:
相关推荐
在给定的资源中,包含了一个名为"弹出框js1.8.2"的压缩包,这可能是一个基于JavaScript 1.8.2版本实现的遮罩层弹出框解决方案。 首先,我们需要理解JavaScript的基础知识。JavaScript是一种广泛使用的客户端脚本...
总的来说,JS遮罩插件是Web开发中的一个实用工具,它可以增强用户体验并使页面交互更加流畅。利用jQuery这样的库,创建和管理遮罩效果变得更加便捷。通过深入学习和实践,你将能够熟练掌握这类插件,并在你的项目中...
在JavaScript编程中,"JS遮罩窗口"是一个常见的功能,用于在网页上创建一个半透明的覆盖层,通常用于显示弹出式对话框、加载提示或者阻塞用户交互直到特定操作完成。这种技术增强了用户体验,因为遮罩可以使得背景...
js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层
JavaScript 遮罩层插件是一种常见的前端开发工具,它用于在页面上创建一个半透明的覆盖层,通常用于在用户等待加载数据或执行异步操作时提供视觉反馈。在这个场景中,我们讨论的插件可能名为“LoadMask”或者“lwb_...
本文将深入探讨如何使用JavaScript来实现一个基本的遮罩层功能。 首先,我们需要理解遮罩层的基本概念。遮罩层通常是一个全屏或半透明的元素,覆盖在网页内容之上,用于突出显示特定区域或信息。在HTML中,我们可以...
本篇将详细探讨“遮罩层 Js”这一主题,以及如何通过调用一个方法实现自定义的遮罩层功能。 首先,遮罩层在网页中的应用非常广泛,如加载提示、弹窗确认、模态对话框等场景。在JavaScript中实现遮罩层,通常涉及到...
JavaScript图片展示遮罩特效是一种常见的网页交互设计,它在用户将鼠标悬停在图片上时,会自动弹出一个半透明的遮罩层,显示更详细的图片信息或提供额外的操作选项。这种效果常用于相册浏览、产品展示、游戏交互等...
在本文中,我们将深入探讨一个重要的前端技术——遮罩层(Mask),以及如何在实际项目中结合Ajax使用它。遮罩层通常用于在用户进行某种操作或加载数据时,提供一个半透明覆盖层,以防止用户与页面其他部分进行交互,...
本主题聚焦于"遮罩层js",这是一个基于jQuery和sliphover库实现的JavaScript代码,它允许开发者创建具有多样性和自定义功能的遮罩层。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...
同样地,我们可以编写一个函数来关闭遮罩层: ```javascript function closeMask() { var mask = document.getElementById('mask'); mask.style.display = 'none'; } ``` 五、添加loading图片 在遮罩层内添加...
在这个主题中,我们关注的是一个基于jQuery库的遮罩插件,适用于jQuery 1.9及更高版本。jQuery是JavaScript的一个库,它简化了DOM操作、事件处理、动画和Ajax交互,极大地提高了开发效率。 这个遮罩插件旨在为网页...
"遮罩层 javascript js 数据提交"这个主题涉及到的是如何在JavaScript中实现一个遮罩层,并在用户点击提交按钮时,利用JavaScript处理数据提交的过程。在此过程中,遮罩层的出现和消失以及提交操作的执行,都是通过...
`mask`允许你通过图像或渐变来隐藏部分元素,而`rgba()`则可以创建一个具有透明度的颜色层。 - **JavaScript遮罩**:JS可以通过修改DOM元素的CSS属性,如`style.backgroundColor`或`style.opacity`,来动态创建遮罩...
JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层
在JavaScript编程中,"弹出遮罩层"是一种常见的用户界面设计手法,它通常用于创建一个半透明的覆盖层,以突出显示特定区域或者暂停其他交互,为用户提供一种聚焦的体验。例如,当我们需要显示模态对话框、加载提示...
以上就是一个基本的JavaScript实现登录遮罩层的过程。这个过程中,开发者需要理解HTML和CSS的基本语法,以及JavaScript中的DOM操作、事件监听、类操作等概念。对于初学者来说,这是一个很好的实践项目,可以深入理解...
在这个例子中,我们需要一个按钮触发遮罩层的显示,并且需要一个遮罩层元素本身: ```html <!DOCTYPE html> , initial-scale=1.0"> <title>JS移动端点击弹出遮罩层 .mask { position: fixed; top: 0; ...
"js 页面全部遮罩层"这个话题涉及到使用JavaScript(通常借助jQuery库)来实现全屏遮罩效果,包括阻止鼠标滚动和键盘上下键的操作。以下是对这个主题的详细讲解: 首先,我们需要理解遮罩层的基本概念。遮罩层通常...
js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得