0顶

导航百分比控制

稿源：互联网 2022-06-04 17:34:12 点击： 765 撤稿纠错

导航显示百分比控制，可自定义，阿里西西网页特效收集。

以下讨论的是和js 导航相关的导航百分比控制教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

脚本说明:
把如下代码加入<body>区域中
<script language="javascript">

var loadedcolor='navy' ;            // PROGRESS BAR COLOR
var unloadedcolor='lightgrey';      // BGCOLOR OF UNLOADED AREA
var barheight=15;                   // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=350;                   // WIDTH OF THE BAR IN PIXELS
var bordercolor='black';            // COLOR OF THE BORDER

var action=function()
{
//window.location="http://www.dynamicdrive.com
}

var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var blocksize=(barwidth-2)/100;
barheight=Math.max(4,barheight);
var loaded=0;
var perouter=0;
var perdone=0;
var images=new Array();
var txt='';
if(ns4){
txt+='<table cellpadding=0 cellspacing=0 border=0><tr><td>';
txt+='<ilayer name="perouter" width="'+barwidth+'" height="'+barheight+'">';
txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';
txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';
txt+='<layer name="perdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';
txt+='</ilayer>';
txt+='</td></tr></table>';
}else{
txt+='<div id="perouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';
txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; z-index:100; font-size:1px;"></div>';
txt+='<div id="perdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; z-index:100; font-size:1px;"></div>';
txt+='</div>';
}

document.write(txt);

function incrCount(prcnt){
loaded+=prcnt;
setCount(loaded);
}

function decrCount(prcnt){
loaded-=prcnt;
setCount(loaded);
}

function setCount(prcnt){
loaded=prcnt;
if(loaded<0)loaded=0;
if(loaded>=100){
loaded=100;
setTimeout('hidebar()', 400);
}
clipid(perdone, 0, blocksize*loaded, barheight-2, 0);
}

//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}

function progressBarInit(){
perouter=(ns4)?findlayer('perouter',document):(ie4)?document.all['perouter']:document.getElementById('perouter');
perdone=(ns4)?perouter.document.layers['perdone']:(ie4)?document.all['perdone']:document.getElementById('perdone');
clipid(perdone,0,0,barheight-2,0);
if(ns4)perouter.visibility="show";
else perouter.style.visibility="visible";
}

function hidebar(){
//(ns4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
}

function clipid(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r;
}

window.onload=progressBarInit;

window.onresize=function(){
if(ns4)setTimeout('history.go(0)' ,400);
}
</script>
<font size="2" face="Verdana">- </font><a href="javascript:incrCount(5)"><font size="2" face="Verdana">增加
      5% ( <span class="pre">incrCount(5)</span> )<br>
      </font></a>- <a href="javascript:decrCount(5)"><font size="2" face="Verdana">减去
      5% ( <span class="pre">decrCount(5)</span> )<br>
      </font></a><font size="2" face="Verdana">- </font><a href="javascript:setCount(0)"><font size="2" face="Verdana">显示到 0% ( <span class="pre">setCount(0)</span> )<br>
      </font></a><font size="2" face="Verdana">- </font><a href="javascript:setCount(25)"><font size="2" face="Verdana">显示到 25% ( <span class="pre">setCount(25)</span> )<br>
      </font></a><font size="2" face="Verdana">- </font><a href="javascript:setCount(50)"><font size="2" face="Verdana">显示到 50% ( <span class="pre">setCount(50)</span> )<br>
      </font></a><font size="2" face="Verdana">- </font><a href="javascript:setCount(75)"><font size="2" face="Verdana">显示到 75% ( <span class="pre">setCount(75)</span> )<br>
      </font></a><font size="2" face="Verdana">- </font><a href="javascript:setCount(100)"><font size="2" face="Verdana">显示到 100% ( <span class="pre">setCount(100)</span> )</font></a>

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于导航百分比控制的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200807193498.shtml方便下次再访问哦。

·上一篇： 滚动条的设置
·下一篇： 显示当前页链接

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

导航百分比控制

文章分类LIST >>返回首页

最新游戏

最新新闻