`
tw5566
  • 浏览: 460635 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

js等待效果

阅读更多
function showloading(){
	var loaddiv;
	if(loaddiv=document.getElementById("loaddiv")){
		loaddiv.style.display = "block";
	}else{
	    loaddiv = document.createElement("DIV");
	    loaddiv.id="loaddiv";
	    loaddiv.style.position = "absolute";
	    loaddiv.style.zIndex = 1000;
	    loaddiv.style.display="";
	    loaddiv.style.left = 0;
	    loaddiv.style.top  = 0;
	    loaddiv.style.border = "1px solid gray"
	    loaddiv.style.background = "#ffffff"
	    loaddiv.style.padding = "5";
	}
	
	var scrollTop=0;
    if(top.document.documentElement && top.document.documentElement.scrollTop){
        scrollTop = top.document.documentElement.scrollTop;
    }else if(document.body){
        scrollTop = top.document.body.scrollTop;
    }
    
    var scrollWid = document.body.scrollWidth/2-50;
    
    loaddiv.style.left = scrollWid+"px";
    loaddiv.style.top  = (scrollTop + 5)+"px" ;
    
    loaddiv.innerHTML = "<img src='/images/loading.gif'><h>数据正在获取,请稍等。。。</h>";
    document.body.style.cursor="wait";  
    
    
  var sWidth,sHeight;
  sWidth=document.body.scrollWidth;//浏览器工作区域内页面宽度 或使用 screen.width//屏幕的宽度
  sHeight=document.body.scrollHeight;//屏幕高度(垂直分辨率)


  //背景层(大小与窗口有效区域相同,即当弹出对话框时,背景显示为放射状透明灰色)
  var bgObj=document.createElement("div");//创建一个div对象(背景层) //动态创建元素,这里创建的是 div
  //定义div属性,即相当于(相当于,但确不是,必须对对象属性进行定义
  //<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div>
  bgObj.setAttribute('id','bgDiv');
  bgObj.style.position="absolute";
  bgObj.style.top="0";
  bgObj.style.background="#ffffff";
  bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
  bgObj.style.opacity="0.6";
  bgObj.style.left="0";
  bgObj.style.width=sWidth + "px";
  bgObj.style.height=sHeight + "px";
  bgObj.style.zIndex = "10000";
  document.body.appendChild(bgObj);//在body内添加该div对象
    
  document.body.appendChild(loaddiv);
}
0
0
分享到:
评论

相关推荐

    js加载页面等待效果

    综上所述,实现"js加载页面等待效果"需要结合JavaScript的事件监听、DOM操作、CSS动画、异步加载策略等多个方面知识,同时注重性能优化和用户体验设计,以确保用户在等待页面完全加载的过程中获得积极的视觉反馈。...

    js等待提示,页面提交等待载入效果

    在"js等待提示"中,JavaScript扮演了关键角色,它可以监听页面上的特定事件,如表单提交,当这些事件触发时,显示等待提示,待处理完成后隐藏提示。 首先,我们需要创建一个可视化的等待提示元素,这通常是一个包含...

    Javascript打开页面等待效果

    在网页加载过程中,用户可能会遇到长时间等待的情况,此时为了提供更好的用户体验,我们可以使用JavaScript来实现页面加载等待效果。这种效果通常被称为“加载指示器”或“进度条”,它可以让用户知道页面正在加载,...

    javascript经典特效---打开页面的等待(一).rar

    本资源“javascript经典特效---打开页面的等待(一).rar”着重介绍了如何利用JavaScript来实现一种常见的用户体验优化——页面加载时的等待效果。 在用户打开一个网页时,如果页面内容加载时间较长,可能会让用户...

    一个相对完善的js loading等待效果例子

    在JavaScript开发中,"加载等待效果"是一种常见的用户体验优化手段,它通常用于在处理大量数据或执行异步操作时向用户展示进度,以减少用户的等待焦虑。本案例中,我们探讨的是一个相对完善的JS实现的加载等待效果。...

    JS加载等待效果

    JavaScript加载等待效果是一种常见的用户体验优化技术,特别是在网页内容动态加载或者需要进行大量计算时。它通过展示一个加载动画或进度条来告知用户页面正在处理数据,以减少用户的等待焦虑感,提升整体的交互体验...

    利用 spin.js 生成等待效果(js 等待效果)

    《使用spin.js创建JavaScript等待效果》 在网页开发中,用户交互时的加载等待效果是提升用户体验的关键元素之一。spin.js是一个轻量级且功能强大的JavaScript库,专门用于生成各种类型的加载指示器,即我们常说的...

    js加载等待效果

    "js加载等待效果"是一种技术手段,用于提升用户体验,确保用户在等待内容加载时能够有所感知,避免因页面无响应而产生疑惑或不耐烦。这个效果通常通过JavaScript实现,结合CSS和HTML,为用户提供一个视觉上的反馈,...

    js实现页面等待特效

    在网页开发中,为了提升用户体验,常常需要在用户进行某些操作(如点击链接、提交表单)时显示等待效果,让用户知道系统正在处理请求。本文将深入探讨如何使用JavaScript来实现这样的页面等待特效,主要关注进度条和...

    asp.net等待效果

    2. **JavaScript交互**:在ASP.NET中,可以使用JavaScript或jQuery来控制等待效果的显示与隐藏。当用户触发一个长耗时操作时,显示等待效果;操作完成后,隐藏等待效果。例如,可以监听按钮的`click`事件,然后使用`...

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

    JavaScript加载等待效果是一种常见用户体验优化技术,用于在数据加载期间向用户展示反馈,告知他们系统正在处理请求。这种效果通常会在用户点击按钮或链接后显示,直到后台数据完全加载完毕。下面将详细介绍实现这一...

    动态转圈等待效果.zip

    本项目"动态转圈等待效果.zip"包含了一个实现这种效果的HTML、CSS和JavaScript小实例。 1. HTML 结构基础: HTML部分通常会包含一个占位符元素,用于显示等待动画。例如,可以创建一个`&lt;div&gt;`元素,给它一个特定的...

    HTML js等待框

    接下来,我们编写JavaScript代码(`jsWaitDialog.js`)来控制等待框的显示和关闭: ```javascript document.getElementById('start-loading').addEventListener('click', function() { showWaitDialog(); // ...

    进度条代码+页面+各种动态等待效果图片

    在用户进行操作时,如数据加载、文件上传等耗时过程,一个清晰、美观的进度条或动态等待效果能够大大提高用户的满意度,减轻他们的焦虑感。本文将详细介绍如何实现标题所提及的"进度条代码+页面+各种动态等待效果...

    超强JavaScript效果[超强JavaScript效果]

    9. **透明层(遮罩层)**:通过CSS的`opacity`和`z-index`属性,可以创建半透明的覆盖层,用于展示警告信息或加载等待效果。 10. **JSP转HTML或其他格式**:通过客户端或服务器端脚本,将JSP页面转换为HTML或其他...

    页面加载等待效果

    2. **JavaScript动画库**:像jQuery、React、Vue等库提供了丰富的动画API,可以轻松实现等待效果。例如,jQuery的`.animate()`方法可以创建自定义动画,而React则可以通过`useState`和`useEffect`配合实现组件的动画...

    JavaScript经典效果集锦

    根据给定的信息,“JavaScript经典效果集锦”这篇文章主要介绍了多种使用JavaScript实现的网页特效与功能。下面将对文章中提及的一些经典效果进行详细介绍。 ### 1. 实现小技巧 文章开头提到了几个简单的...

    js 等待特效

    下面我们将深入探讨如何使用JavaScript实现等待效果,并结合提供的文件名来分析可能的实现方式。 1. **基本原理**: - 等待特效的核心是通过CSS和JavaScript协同工作来创建动画。CSS用于定义动画样式,如旋转图标...

    CSS 页面置灰等待效果

    本文将深入探讨如何使用CSS实现页面置灰等待效果,并结合一个简单的`load.gif`动画示例,为您的网站增添专业感。 首先,我们需要了解CSS中的`pointer-events`属性。这个属性可以控制元素是否响应鼠标事件。当设置为...

Global site tag (gtag.js) - Google Analytics