前端

img juwuyi

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

发表于2004/10/28 13:11:00  1865人阅读

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


<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>

阅读全文
0 0

相关文章推荐

img
取 消
img