<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入extjs的css样式文件 -->
<link rel="stylesheet" type="text/css" href="./ext-4.2.1.883/resources/css/ext-all.css">
<!-- 引入使用extjs所依赖的js文件 交给引导程序处理-->
<script type="text/javascript" src="./ext-4.2.1.883/bootstrap.js"></script>
<!-- 引入自己的js文件 extjs所依赖的js文件的引入一定要在自己的js之前引入-->
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
var loadingImgWidth=0;
var maxwidth=300;
var _totalTimes =0;
function __intervalDo(){
loadingImgWidth +=25;
_totalTimes ++;
if(loadingImgWidth >maxwidth) loadingImgWidth =0;
$("#loadingImg").width(loadingImgWidth).height(10);
}
var _mask;
function showMask(flag){
if(flag){
if(!_mask){
_mask=$("<div class='mask'></div>").appendTo(document.body);
}
_mask.show();
}else{
if(_mask) _mask.hide();
}
}
var timeid;
function showLoading(){
showMask(true);
loadingImgWidth = 0;
_totalTimes =0;
$("#loadingImg").width(0).height(10);
$(".loginloading").show();
timeid = window.setInterval(__intervalDo, 100);
}
function doLogin(){
showLoading();
}
function hideLoading(){
showMask(false);
if (timeid) window.clearInterval(timeid);
$(".loginloading").hide();
}
</script>
<style>
.mask{width:100%;height:100%;background:lightblue;position:absolute;top:0; left:0;z-index:9999;opacity:0.1;}
.box{width:300px;height:40px;background:#cccccc;position:absolute;top:40px;left:40px}
.loginloading {position:absolute; bottom:0; right:0; width: 300px; height:10px; background:#F2F2F2; display:none;}
</style>
</head>
<body>
<div id="" class="box">
<input type="button" name="" value="登录" onClick="doLogin()"><input type="button" value="取消" onclick="hideLoading()">
<div id="" class="loginloading">
<img src="./loading.png" id ="loadingImg">
</div>
</div>
</body>
</html>
分享到：
相关推荐
本资源包含的"js 写的动画效果源码"着重展示了如何利用JavaScript来创建动画效果，这对于前端开发者来说是极具价值的学习材料。 在JavaScript中，实现动画效果主要有以下几种方式： 1. **setTimeout 和 ...
在本文中，我们将深入探讨如何使用ArcGIS JavaScript API（JS API）与Tween.js库来创建图层闪烁动画效果。这是一个非常实用的技术，特别是在地理信息系统（GIS）应用中，可以吸引用户的注意力或者突出显示特定的地理...
**Three.js 概述** Three.js 是一个JavaScript库...总的来说，这个项目展示了如何使用Three.js库来创建复杂的3D火焰和烟雾动画效果，通过理解Three.js的核心概念和技术，我们可以进一步探索和创建更多的3D交互式内容。
总结起来，JavaScript动画效果是网页动态设计的关键，涵盖了元素大小变换、位移和透明度调整等多个方面。通过合理使用JavaScript和CSS3，我们可以创建出高性能且兼容各种浏览器的动画。实践中，了解并掌握不同浏览器...
在这个"js半圆形banner切换动画效果"的项目中，我们探讨的是如何利用JS来创建一种独特的视觉效果，即在Banner（横幅广告或展示区域）上展示内容时，采用半圆形的动画过渡。 首先，我们需要了解半圆形的概念。在CSS...
本压缩包提供了一套"js实现动画效果的导航"，这是一套美观的js导航栏，旨在提升网站的用户体验和视觉吸引力。下面我们将深入探讨这个主题，解析其中涉及的关键知识点。 首先，`miaov_style.css`是CSS（层叠样式表）...
在JavaScript编程中，模仿微信语音播放的动画效果是一项有趣且实用的技术挑战。微信语音播放时，用户会看到一个小喇叭图标，随着声音的播放，图标会有动态的变化，这种效果增加了用户体验的交互性和趣味性。以下是对...
**tween.js——让JavaScript动画变得平滑流畅** 在网页设计和开发中，动画效果能够提升用户体验，增加视觉吸引力。tween.js就是这样一个强大的JavaScript库，专为创建平滑、流畅的动画效果而设计。这款库允许开发者...
"js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用，主要用于创建一种视觉上连续、无中断的文字滚动展示，常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息，而不会显得拥挤。...
"JS动画效果源代码（含注释）"这个资源包含了实现各种JavaScript动画效果的源码，这些代码经过了详细的注释，方便初学者理解和学习。 在JavaScript中，动画效果主要通过操作DOM（Document Object Model）元素的样式...
【纯js网页数字滚动累计动画效果】是一种常见的前端交互设计，它通过JavaScript代码实现数字动态地从一个初始值增加到预设的目标值，为用户提供视觉上的动态反馈，常见于统计数据展示、进度条或者加载效果中。...
1. **JavaScript基础**：JS是实现动画效果的基础，通过改变DOM元素的属性（如位置、大小、透明度等）并利用浏览器的重绘和回流机制，可以创建出流畅的动画。例如，使用`setInterval`或`requestAnimationFrame`来控制...
本实例中的"js实现动画效果的弹出窗口"是一种利用JavaScript、Prototype库以及动画技术来构建的动态对话框功能。它能够以左右上下扩张的动画效果打开一个IFrame，展示用户指定的页面，并在页面切换时保持流畅的动画...
原生js动画效果，方便调用，可以链式调用，可以添加多个属性
javascript动画效果打开层 关闭层，由http://www.che2.com/提供
在“js代码动画效果”这个主题中，我们将深入探讨如何使用JavaScript来创建各种动态视觉效果，提升用户体验。 1. **DOM操作**：在JavaScript中，Document Object Model（DOM）是HTML或XML文档的结构化表示。通过DOM...
在JavaScript的世界里，动画效果是吸引用户注意力和提升用户体验的重要手段。本项目通过JS实现了一款超级好看的树木生长动画，不仅美观，而且可定制性强，允许开发者根据需求进行个性化优化。接下来，我们将深入探讨...
总结来说，"js水波流动效果（仿电信流量球）"是一种结合HTML5、JavaScript和CSS3技术实现的前端动画效果，它通过动态的水波流动来显示数据的百分比，既美观又实用。在开发过程中，开发者需要理解如何利用这些技术...
内容概要：该资源是纯前端js，通过js、html、css实现全屏动画效果，动画效果内包含掉落、缩放、渐变、淡入淡出等过渡、动画效果；巧用字符字体等，减少网络资源加载。该项目可玩性高，支持自定义掉落符号！ 如何...