<style type="text/css">
#loading-mask{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:20000;
background-color:white;
}
#loading{
position:absolute;
left:45%;
top:40%;
padding:2px;
z-index:20001;
height:auto;
}
#loading .loading-indicator{
background:white;
color:#444;
font:bold 20px tahoma,arial,helvetica;
padding:10px;
margin:0;
height:auto;
}
#loading-msg {
font: normal 18px arial,tahoma,sans-serif;
}
</style>
<!-- 退去加载效果 -->
<script type="text/javascript">
Ext.get('loading').setOpacity(0.0,{duration:1.0,callback:function(){this.hide();}});
</script>
login.jsp全部如下：
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/ext-all.css" />
<style type="text/css">
#loading-mask{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:20000;
background-color:white;
}
#loading{
position:absolute;
left:45%;
top:40%;
padding:2px;
z-index:20001;
height:auto;
}
#loading .loading-indicator{
background:white;
color:#444;
font:bold 20px tahoma,arial,helvetica;
padding:10px;
margin:0;
height:auto;
}
#loading-msg {
font: normal 18px arial,tahoma,sans-serif;
}
</style>
</head>
<body>
<!-- 加载效果 -->
<div id="loading">
<div class="loading-indicator">
<img src="ext-2.1/resources/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
<br/><span id="loading-msg">Loading ...</span>
</div>
</div>
<!-- 加载类库 -->
<script type="text/javascript" src="ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.1/ext-all.js"></script>
<script type="text/javascript" src="login2.js"></script>
<!-- 退去加载效果 -->
<script type="text/javascript">
Ext.get('loading').setOpacity(0.0,{duration:1.0,callback:function(){this.hide();}});
</script>
<!-- 登陆界面 -->
<div id='wins'></div>
<!-- -->
</body>
</html>
分享到：
相关推荐
利用Extjs和css实现 加载时的缓冲效果页面
自己模仿Ext写的加载效果，感觉还可以，放上来和大家分享，可在实际项目中使用，收大家一分，意思一下。
涵盖了ext特有功能的所有模板，同时包含源代码，只要简单修改，一个ext构成的前台就出现了。下载你不会后悔的。
EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT...
简单的Ext 富客户端实现 简单的Ext 富客户端实现 简单的Ext 富客户端实现
asdext extext extext extext extext extext extext extext extext extext extext extext extext extext ext
javascript模仿EXT效果的datagrid
ext 桌面效果 网上下载的。extjs 是基于JavaScript开发的类库
ext-3.2.0 JS效果，特效，ext
ext资料 ext资料 ext资料 ext资料 ext资料
ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ex
ext3.0ext3.0ext3.0ext3.0ext3.0ext3.0
又是一个基于extjs开发的控件,Ajax实现，适合用于开发各种系统和后台，其界面效果绚丽十足。ExtJS高级群：86053989
ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...
ext框架仿win 7的效果ext框架仿win 7的效果ext框架仿win 7的效果
ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试
Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1
ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0
分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT
js 页面波浪滚动效果 很好用的 资源不错