9-8.htm

来自「JScript网页特效,包含很多的实现网页特效的方法.」· HTM 代码 · 共 86 行

HTM
86
字号
<html>
<head>
<title>§9.8 模仿进度条效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
#bar, #barbackground{
position:absolute;
left:0;
top:0;
background-color:black;
}

#barbackground{
background-color:#CCCCCC;
}

-->
</style>

<script language="JavaScript">

/*
Dynamic Progress Bar- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/

//1) Set the duration for the progress bar to complete loading (in seconds)
var duration=5

//2) Set post action to carry out inside function below:
function postaction(){
//Example action could be to navigate to a URL, like following:
//window.location="http://www.coolbi.com"
}


///Done Editing/////////////
var clipright=0
var widthIE=0

function initializebar()
{
  if (document.all)
  {
    baranchor.style.visibility="visible"
    widthIE=bar.style.pixelWidth
    startIE=setInterval("increaseIE()",50)
  }
}

function increaseIE()
{
  bar.style.clip="rect(0 "+clipright+" auto 0)"
  window.status="Loading..."
  if (clipright<widthIE)
    clipright=clipright+(widthIE/(duration*20))
  else
  {
    window.status=''
    clearInterval(startIE)
    postaction()
  }
}

window.onload=initializebar

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<script language="JavaScript">
if (document.all)
{
  document.write('<div id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')
  document.write('<div id="barbackground" style="width:200px;height:20px;z-index:9"></div>')
  document.write('<div id="bar" style="width:200px;height:20px;z-index:10"></div>')
  document.write('</div>')
}

</script>

</body>
</html>

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?