<!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实现动画效果的导航"，这是一套美观的js导航栏，旨在提升网站的用户体验和视觉吸引力。下面我们将深入探讨这个主题，解析其中涉及的关键知识点。 首先，`miaov_style.css`是CSS（层叠样式表）...
在这个"js半圆形banner切换动画效果"的项目中，我们探讨的是如何利用JS来创建一种独特的视觉效果，即在Banner（横幅广告或展示区域）上展示内容时，采用半圆形的动画过渡。 首先，我们需要了解半圆形的概念。在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动画效果，方便调用，可以链式调用，可以添加多个属性
threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 动画 数据 threejs 瀑布 ...
javascript动画效果打开层 关闭层，由http://www.che2.com/提供
在“js代码动画效果”这个主题中，我们将深入探讨如何使用JavaScript来创建各种动态视觉效果，提升用户体验。 1. **DOM操作**：在JavaScript中，Document Object Model（DOM）是HTML或XML文档的结构化表示。通过DOM...
在JavaScript的世界里，动画效果是吸引用户注意力和提升用户体验的重要手段。本项目通过JS实现了一款超级好看的树木生长动画，不仅美观，而且可定制性强，允许开发者根据需求进行个性化优化。接下来，我们将深入探讨...
原生js复古的卷轴打开动画_卷轴拉开动画效果代码.rar