`

进度条 ,上传遮罩效果

阅读更多
   function coverBody(json){
    //   alert(jQuery(window.document.body));
var bodyScrollSize=getBodyScrollSize();
$(window.document.body).append($("<iframe id='jq_effect_backGroundIframe' style='z-index:1;filter:mask();overflow:hidden;border:0px;margin:0; padding:0;position:absolute;width:"+bodyScrollSize.width+"px;height:"+bodyScrollSize.height+"px;top:0px;left:0px' scrolling='auto' frameborder='0' ></iframe>"));

var jqCover=$("<div id='jq_effect_backGroundDiv'> <div id='jindu'  style='width:368px;height:28px;margin:0 auto;margin-top:165px;'><img src='<%=request.getContextPath()%>/images/jindu.gif' ></div></div>");
var _css = { "background-color":json.color==undefined?"#000":json.color, "position":"absolute","overflow":"hidden", "-moz-opacity": "0.25" , "filter":"alpha(opacity=25)","z-index":"2" ,"opacity":"0.25", "top" : "0px" , "left":"0px","width":bodyScrollSize.width,"height":bodyScrollSize.height };        
jqCover.css(_css);
//jqCover.appendTo("body");
$(window.document.body).append(jqCover);
}



*****************************************************


function getBodyScrollSize()
{
var bodySL, bodyST, bodySW, bodySH;
if(window.pageXOffset)
{
bodySL=window.pageXOffset;
bodySW=window.innerWidth;
bodyST=window.pageYOffset;
bodySH=window.innerHeight;
}
else if(document.documentElement)
{
bodySL=document.documentElement.scrollLeft;
bodySW=document.documentElement.scrollWidth; //-10
bodyST=document.documentElement.scrollTop;
bodySH=document.documentElement.clientHeight>document.documentElement.scrollHeight?document.documentElement.clientHeight:document.documentElement.scrollHeight;
}
else if(document.body)
{
bodySL=document.body.scrollLeft;
bodySW=document.body.scrollWidth;
bodyST=document.body.scrollTop;
bodySH=document.body.clientHeight>document.body.scrollHeight?document.body.clientHeight:document.body.scrollHeight;
}

return {"top":bodyST,"left":bodySL,"width":bodySW,"height":bodySH};
}
分享到:
评论

相关推荐

    js一键上传与遮罩效果与分页

    本话题将详细探讨"js一键上传"、"遮罩效果"以及"分页"这三个核心知识点,它们是构建高效、用户体验良好的Web应用的重要组成部分。 一、js一键上传 一键上传是指用户只需点击一次按钮,就能实现文件快速上传的功能。...

    数据加载进度条/自定义半透明遮罩层

    常见的数据加载进度条分为两种类型:确定性进度条(例如文件上传或下载)和非确定性进度条(如网络请求)。确定性进度条会显示具体的百分比,而非确定性进度条通常通过动画效果来表示正在进行的过程。设计良好的...

    动态上传文件遮罩层

    在“带图片的动态上传文件,js插件,带遮罩层”这个场景下,我们可以理解为这是一个集成了图片预览、文件上传和遮罩层效果的JavaScript插件。这样的插件可以帮助开发者快速实现一个功能完备的文件上传模块,同时提供...

    遮罩层进度显示

    3. **进度条**:在遮罩层内,我们可以创建一个进度条元素,如`&lt;div&gt;`或`&lt;progress&gt;`,并应用相应的CSS样式和动画效果。 ```html ; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: ...

    图片上传进度条fillprogressbar

    "图片上传进度条fillprogressbar"就是一个旨在改善用户交互的组件,它不仅显示上传进度,还带有填充和遮罩效果,使得用户能够清晰地了解图片上传的状态,同时也增加了界面的视觉吸引力。下面将详细探讨这一知识点。 ...

    JQuery上传插件遮罩层插件(FineMessBox)

    FineMessBox作为一款JQuery插件,其主要优势在于提供了一个可自定义的遮罩层,能够在用户进行文件上传时,创建出一种全屏或局部的半透明覆盖效果,使得用户界面看起来更加专业且不会被其他元素干扰。遮罩层不仅美观...

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

    在jQuery中,我们可以用CSS来创建遮罩,并通过JavaScript控制其显示和隐藏,以实现动态效果。 接下来,我们探讨如何创建“动画过渡”。jQuery提供了多种动画方法,如`fadeIn()`, `fadeOut()`, `slideToggle()`等,...

    jQuery实现简单的文件上传进度条效果

    在本篇教程中,我们将探讨如何使用jQuery来实现一个简单的文件上传进度条效果。这个功能允许用户在上传文件时能够直观地看到上传进度,并以百分比的形式展示。这种进度条不仅可以提升用户体验,还可以让用户知道上传...

    jquery.blockui遮罩插件

    - **可配置性**:提供丰富的配置选项,允许调整遮罩颜色、透明度、动画效果等,以适应不同设计风格。 - **易用性**:使用简单,只需几行代码即可实现页面锁定和解锁,大大提高了开发效率。 **2. 使用步骤** - **...

    jQuery实现文件上传进度条特效

    本篇介绍将详细阐述如何使用jQuery结合后端语言(如PHP)来实现一个带有进度条的文件上传效果,使得每个文件上传时都能实时显示其上传进度和上传详情介绍。 ### 关键技术点与知识点: 1. **文件上传原理**:通常...

    基于jquery ajax的多文件上传进度条过程解析

    这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图 前端代码,基于jquery &lt;!DOCTYPE ...

    js文件,一般的网站都用的上

    3. 遮罩效果:遮罩层通常用于创建弹出窗口或加载指示器,它可以在页面上覆盖一层半透明黑色背景,突出显示特定内容。JavaScript可以控制遮罩的显示和隐藏,以及动画效果,如淡入淡出等。 4. 对话框:对话框是用户...

    jQuery简单实现提交数据出现loading进度条的方法

    背景层用于遮罩页面,展示loading效果,其样式设置为`display: none`,默认不显示,当需要显示加载状态时再将其设置为`display: block`。加载图标容器则包含了加载图标的图片,同样初始设置为不显示。 ```html &lt;!...

    jquery-ui-1.8rc1

    `jquery-ui-1.8rc1` 是该框架的一个早期版本,包含了众多功能强大的前端特效和示例代码,让开发者能够轻松实现拖放、排序、遮罩、进度条以及动画效果等。 **一、jQuery UI 的主要特点:** 1. **易用性**:jQuery ...

    jquery-ui-1.11.4完整版

    7. 进度条(Progressbar):展示任务进度,可以是垂直或水平样式,适用于上传、下载等场景。 8. 排序列表(Sortable):使列表项可以进行拖放排序,常见于待办事项列表、菜单栏等。 9. 缩放(Resizable):使元素...

    HTML5在线视频播放器插件下载

    这通常涉及到CSS的伪元素和颜色属性,如`color`、`background-color`或`border-color`,通过这些属性可以改变播放、暂停、进度条等按钮的颜色,以增加视觉一致性。 遮罩层透明度的设置对于创建沉浸式用户体验至关...

    JAVA上百实例源码以及开源项目源代码

    Java绘制图片火焰效果 1个目标文件 摘要:Java源码,图形操作,火焰效果 Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、...

    Extjs中文教程

    - **进度条对话框**用于显示后台任务的执行进度。 #### 四、页面与脚本完全分离 - **Extjs是脚本的世界** - 强调使用JavaScript来控制页面逻辑,而非HTML或CSS。 - 通过JavaScript动态生成DOM元素和处理事件。 ...

Global site tag (gtag.js) - Google Analytics