网页Ajax Loading效果

2024-09-05 12:18:32

字体：大中小

来源：转载

供稿：网友

很不错的网页Loading效果，常用于Ajax交互式网页设计中，点击按钮即可弹出Loading框，若Loading框未加载完成时关闭网页，会弹出确认提示框，用于一些对安全性能要求高的网页交互处理中，比如付款操作。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>很不错的网页Ajax Loading效果</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();   window.onresize = resizeModal;   window.onbeforeunload = showWarning;   continueLongProcess();}function updateProgress(nNewPercent){   divProgressInner.style.width = (parseInt(divProgressOuter.style.width)      * nNewPercent / 100)+ "px";}function stopLongProcess(){   if (g_oTimer != null)   {      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)   {      var nTimeoutLength = Math.random() * 250;      updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS);      g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength);      nRepetitions++;   }   else   {      stopLongProcess();   }}function showWarning(){   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(){   divModal.style.width = document.body.scrollWidth;   divModal.style.height = document.body.scrollHeight;   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();"><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">      加载中……   </DIV>   <DIV STYLE="PADDING: 5px">     请稍等，网页正在处理中……   </DIV>   <DIV STYLE="PADDING: 5px">      可能需要数秒钟.   </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="取消">   </DIV></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></body></html>

上一篇：获取上传图片的大小及长、宽像素

下一篇：JavaScript网页随屏滚动(再次改进)