月光软件站 - 编程文档 - 网站制作 - [原创]仿Bindows的登陆渐变滚动条（2）---双向循环滚动

网站制作

本类阅读TOP10

·IIS 安装配置全攻略
·html基础学习笔记（2）
·html基础学习笔记（1）
·用VS.NET打开网上下载的.NET web项目出错的解决办法
·如何在网页上实现进度条
·限制TextArea区的文字输入数量
·HTML 4.0 语言快速参考
·在weblogic上配置SSL
·页面垂直居中的两种方法
·Zope/Plone内容管理系统的探讨与应用－内容管理系统（CMS）的概述

→ 分类导航

VC语言	Delphi
VB语言	ASP
Perl	Java
Script	数据库
其他语言	游戏开发
文件格式	网站制作
软件工程	.NET开发

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

作者：未知来源：月光软件站 加入时间：2005-2-28　月光软件站

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

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

相关文章：

相关软件：