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

最新推荐文章于 2005-08-22 14:55:00 发布

juwuyi

最新推荐文章于 2005-08-22 14:55:00 发布

阅读量2k

点赞数

分类专栏： ==Web之旅== 文章标签： function button filter input div class

本文链接：https://blog.csdn.net/juwuyi/article/details/156444

版权

==Web之旅== 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

<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" οnclick="longtime();" value="开始">
<INPUT id="ip2" TYPE="BUTTON" οnclick="fnStopInterval();" DISABLED value="停止"><P><P>

juwuyi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
[原创]仿Bindows的登陆渐变滚动条（2）---双向循环滚动

将以下代码复制回本地演示吧！.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: pro
复制链接

扫一扫