<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">
<SCRIPT LANGUAGE="JScript">
var NUMBER_OF_REPETITIONS = 40;
var nRepetitions = 0;
var g_oTimer = null;
function startLongProcess()
{
divProgressDialog.style.display = "";
resizeModal();
btnCancel.focus();
// Add a resize handler for the window
window.onresize = resizeModal;
// Add a warning in case anyone tries to navigate away or refresh the page
window.onbeforeunload = showWarning;
//
// Here's where you would normally kick off a long asynchronous process
// like a file download or a remote database operation. Here, we use
// our "long process" to simulate this process.
//
continueLongProcess();
}
function updateProgress(nNewPercent)
{
// Update our pseudo progress bar
divProgressInner.style.width = (parseInt(divProgressOuter.style.width)
* nNewPercent / 100)+ "px";
}
function stopLongProcess()
{
if (g_oTimer != null)
{
// Clear the timer so we don't get called back an extra time
window.clearTimeout(g_oTimer);
g_oTimer = null;
}
// Hide the fake modal DIV
divModal.style.width = "0px";
divModal.style.height = "0px";
divProgressDialog.style.display = "none";
// Remove our event handlers
window.onresize = null;
window.onbeforeunload = null;
nRepetitions = 0;
}
function continueLongProcess()
{
if (nRepetitions < NUMBER_OF_REPETITIONS)
{
// Set the timeout somewhere between 0 and .25 seconds
var nTimeoutLength = Math.random() * 250;
updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS);
g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength);
nRepetitions++;
}
else
{
stopLongProcess();
}
}
function showWarning()
{
//Warn users before they refresh the page or navigate away
return "Navigating to a different page or refreshing the window could cause you to lose precious data.\n\nAre you*absolutely* certain you want to do this?";
}
function resizeModal()
{
// Resize the DIV which fakes the modality of the dialog DIV
divModal.style.width = document.body.scrollWidth;
divModal.style.height = document.body.scrollHeight;
// Re-center the dialog DIV
divProgressDialog.style.left = ((document.body.offsetWidth -
divProgressDialog.offsetWidth) / 2);
divProgressDialog.style.top = ((document.body.offsetHeight -
divProgressDialog.offsetHeight) / 2);
}
</SCRIPT>
<INPUT TYPE="BUTTON" VALUE="Click Me!" onclick="startLongProcess();">
<!-- BEGIN PROGRESS DIALOG -->
<DIV STYLE="BORDER: buttonhighlight 2px outset; FONT-SIZE: 8pt; Z-INDEX:
4; FONT-FAMILY: Tahoma; POSITION: absolute; BACKGROUND-COLOR: buttonface;
DISPLAY: none; WIDTH: 350px; CURSOR: default" ID="divProgressDialog"
onselectstart="window.event.returnValue=false;">
<DIV STYLE="PADDING: 3px; FONT-WEIGHT: bolder; COLOR: captiontext;
BORDER-BOTTOM: white 2px groove; BACKGROUND-COLOR: activecaption">
Downloading Requested Document
</DIV>
<DIV STYLE="PADDING: 5px">
Please wait while I download the document you requested.
</DIV>
<DIV STYLE="PADDING: 5px">
This may take several seconds.
</DIV>
<DIV STYLE="PADDING: 5px">
<DIV ID="divProgressOuter" STYLE="BORDER: 1px solid threedshadow;
WIDTH: 336px; HEIGHT: 15px">
<DIV ID="divProgressInner" STYLE="COLOR: white; TEXT-ALIGN:
center; BACKGROUND-COLOR: infobackground; MARGIN: 0px; WIDTH: 0px; HEIGHT:
13px;"></DIV>
</DIV>
</DIV>
<DIV STYLE="BORDER-TOP: white 2px groove; PADDING-BOTTOM: 5px; PADDING-TOP: 3px;
BACKGROUND-COLOR: buttonface; TEXT-ALIGN: center">
<INPUT STYLE="FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE="button"
ID="btnCancel" onclick="stopLongProcess();" VALUE="Cancel">
</DIV>
</DIV>
<!-- END PROGRESS DIALOG -->
<!-- BEGIN FAKE MODAL DIV-->
<DIV ID="divModal"
STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:
absolute; TOP: 0px; Z-INDEX: 3"
onclick="window.event.cancelBubble=true; window.event.returnValue=false;">
</DIV>
<!-- END FAKE MODAL DIV -->
</body>
</html>
分享到:
相关推荐
漂亮的loading加载效果特效 网页特效代码演示! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
Loading动画特效
代码简介:纯CSS3加载动画Loading特效代码里面包含30多种不同效果的加载动画。
jQuery Loading页面加载动画效果代码是一款读取进度条的特效代码
发光Loading加载特效是一款与众不同的CSS3 Loading动画效果,它是由几个不同的动画效果组合而成的,像文字打印效果、发光效果、飞入飞出效果,这几种效果都非常酷。
纯CSS3加载动画Loading特效代码里面包含30多种不同效果的加载动画。
科技感十足Loading加载特效是一款黑色背景明暗变化loading网页加载动画特效。
jQuery Loading页面加载动画效果代码是一款读取进度条的特效代码
描述: css3代码与js插件一同实现的loading效果 原理比较简单,效果也比较好看 因使用较少,本案例暂只提供观赏 这里就不解释如何使用了
发光Loading加载特效是一款与众不同的CSS3 Loading动画效果,它是由几个不同的动画效果组合而成的,像文字打印效果、发光效果、飞入飞出效果,这几种效果都非常酷。
这是一款简单好看的CSS3圆环旋转加载loading动画特效,纯CSS3实现多层圆环页面加载动画效果。
CSS3绿色Loading加载动画特效是一款纯CSS3实现的绿色清新页面Loading加载动画特效。
这是一款漂亮的css3 loading动画特效。该特效中包含了15种不同的loading动画效果,他们通过简单的HTML结构和CSS3代码来实现。
HTML5发光Loading动画是一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
28酷炫吊的CSS3加载效果特效动画代码,分分钟让你的加载超乎你的想象
这是一款css3炫酷3D立方体预加载loading特效。该特效通过简单的HTML元素和CSS3代码,构建几个立方体不停运动的动画特效,适用于做页面的loading效果。
一款非常好看的CSS3绘制花瓣发光旋转加载loading动画特效,由花瓣旋转和线条进度条加载动画效果组成。
CSS多款loading加载动画效果,纯CSS代码,15款CSS加载loading动画图标,多种颜色loading图标。
mootools焦点图特效代码-支持Loading效果,您借此图片特效还可学习一下另一款优秀的Js插件:mootools的具体用法。这款焦点图自带有加载条,其实是进度条,通过进度条可看到图片什么时候可以切换了,进度条由左侧进行...