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