[原创]仿Bindows的登陆渐变滚动条(2)---双向循环滚动

王朝other·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

将以下代码复制回本地演示吧!

<style>

.s1{

position:relative;left:0;text-align:center;width:1;BORDER-RIGHT: #FFFFFF 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFFFFF 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#ffffff, EndColorStr=#0C266B); BORDER-LEFT: #FFFFFF 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFFFFF 1px solid;

}

.s2{

position:relative;left:500;text-align:center;width:1;BORDER-RIGHT: #FFFFFF 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFFFFF 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#0C266B, EndColorStr=#ffffff); BORDER-LEFT: #FFFFFF 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFFFFF 1px solid

}

</style>

<SCRIPT>

var w,l,state,m,n;

var oInterval="";

function longtime()

{

w=0;

l=0;

state=0;

m=5;

n=500;

b1.style.cursor="wait";

ip1.disabled=true;

ip2.disabled=false;

if(oInterval==""){

oInterval=window.setInterval("fnRecycle()",50);

}

}

function fnRecycle()

{

//alert(d1.firstChild.style.width);

window.status="w="+w+";l="+l+";state="+state;

if (l<=1){

state=0;

l+=m;

d1.firstChild.className="s1";

}

if ((l<=n/2)&&(state==0)){

l+=m;

w+=m;

if (w>n){

w=n;

}

}

if ((l<=n/2)&&(state==1)){

l-=m;

w-=m;

if (w<1){

w=0;

}

}

if ((l>n/2)&&(l<500)&&(state==0)){

l+=m;

w-=m;

if (w<1){

w=0;

}

}

if ((l>n/2)&&(l<500)&&(state==1)){

l-=m;

w+=m;

if (w>n){

w=n;

}

}

d1.firstChild.style.left=l;

d1.firstChild.style.width=w;

if(l>=n){

state=1;

l-=m;

d1.firstChild.className="s2";

}

}

function fnStopInterval(){

if(oInterval!=""){

window.clearInterval(oInterval);

oInterval="";

b1.style.cursor="";

ip1.disabled=false;

ip2.disabled=true;

}

}

</SCRIPT>

<BODY id=b1>

点击下面的开始按钮,就可以开始了,这是一个双向循环的渐变的滚动条,源码请查看源文件!

<br>

<INPUT id="ip1" TYPE="BUTTON" onclick="longtime();" value="开始">

<INPUT id="ip2" TYPE="BUTTON" onclick="fnStopInterval();" DISABLED value="停止"><P><P>

<DIV id="d1" style="padding:1px 1px 1px 1px; background-color:#FFFFFF;width:510;BORDER-RIGHT: #808080 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #808080 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; BORDER-LEFT: #808080 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #808080 1px solid">

<DIV id="d2" class="s1"></DIV>

</DIV>

</BODY>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航