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

原创 2004年10月28日 13:11:00

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


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

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

http://blog.csdn.net/juwuyi/archive/2004/10/28/156444.aspx
  • cer
  • cer
  • 2004年10月28日 16:51
  • 535

[原创]仿Bindows的登陆渐变滚动条(1)---单向滚动

var i;function longtime(){ i=0; b1.style.cursor="wait"; b1.disabled=true; timedIterations(); }f...
  • juwuyi
  • juwuyi
  • 2004年10月28日 13:08
  • 1730

仿Bindows的登陆渐变滚动条(1)---单向滚动

http://blog.csdn.net/juwuyi/archive/2004/10/28/156438.aspx?Pending=true
  • cer
  • cer
  • 2004年10月28日 16:49
  • 280

android Recyclerview仿京东,滚动屏幕标题栏渐变

Recyclerview实现标题栏渐变和上拉下拉刷新。如果需要listview,等其他控件,需实现onScrollListener,在onscroll中嵌入渐变代码。...
  • jdsjlzx
  • jdsjlzx
  • 2015年11月21日 17:23
  • 20651

android 仿京东,滚动屏幕标题栏渐变+(启动页面动画)

我相信不仅我,被侵犯原创的人,以后再也不会上传资源了。886
  • conglida
  • conglida
  • 2016年09月27日 17:09
  • 1197

GradationTitleBar渐变得标题样式

整理得网上资料 如图 下载地址
  • qq_34709056
  • qq_34709056
  • 2017年05月27日 11:37
  • 115

自设标题栏随着布局向上滚动实现透明渐变

给listview实现setOnScrollListener的监听事件。我们的思路就是通过获取被监听的控件即listview的第一个item的顶点(top)所在的位置,用它所在顶点的相反值(为什么要相...
  • u014436704
  • u014436704
  • 2015年11月21日 14:37
  • 1140

重置sql server sa密码

以windows身份登陆后在查询分析器里面输入以下内容: sp_password Null,'123','sa'将sa密码修改为123 这样就可以了...
  • chenghaibing2008
  • chenghaibing2008
  • 2011年08月08日 14:14
  • 2135

【商城开发一】Android高仿京东标题栏渐变,下拉隐藏(RecyclerView)

开始工作了,第一个项目是一个商城app,分享一下京东商城滑动标题栏渐变,下拉刷新隐藏标题栏的效果。先看看再说 1.先看一下布局文件,是一个刷新控件嵌套一个RecyclerView,head_sear...
  • LuckKissMo
  • LuckKissMo
  • 2017年02月24日 18:56
  • 872

分享一个通过JS、CSS3滚动渐变的效果

效果预览:http://bbs.3uol.com/tongchengmama/
  • sannyzeng
  • sannyzeng
  • 2014年05月12日 15:19
  • 999
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[原创]仿Bindows的登陆渐变滚动条(2)---双向循环滚动
举报原因:
原因补充:

(最多只允许输入30个字)