将以下代码复制回本地演示吧！
<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>
|
本类阅读TOP10