js 三种滚动条
<html>
<head><title>进度条</title></head>
<style type="text/css">
#gd1
{
margin-top:50px;
margin-left:100px;
}
#gdtext1
{
float:left;
font-size:20px;
padding-right:20px;
border:0px;
}
#border1
{
height:26px;
width:302px;
border:1px solid #000;
background-color:#fff;
float:left;
}
#fill
{
height:20px;
width:2px;
background-color:#c4c4c5;
margin-top:2px;
margin-left:1px;
}
#btngn1
{
margin-left:20px;
height:35px;
width:100px;
font-size:18px;
font-weight:bolder;
}
#gdtext2, #border2,#btngd2
{
float:left;
}
#gd2
{
margin-top:40px;
}
#gdtext2
{
margin-left:100px;
padding-right:20px;
font-size:20px;
}
#border2
{
border:1px solid #000;
height:30px;
width:300px;
}
#btngd2
{
margin-left:28px;
width:100px;
height:35px;
font-size:20px;
font-weight:bolder;
}#fill2
{
height:24px;
width:10px;
margin-top:2px;
margin-left:1px;
background-color:#76EE00;
color:#fff;
}
#gd3
{
margin-top:120px;
width:900px;
height:50px;
overflow:hidden;
}
#gdtext3, #border3,#divgd3
{
float:left;
}
#gdtext3
{
font-size:20px;
margin-left:90px;
margin-right:30px;
}
#border3
{
width:300px;
overflow:hidden;
padding-top:3px;
cursor:hand;
}
#fill3
{
height:3px;
width:3px;
margin-top:-18px;
background-color:red;
}
#divgd3
{
margin-left:28px;
font-size:20px;
font-weight:bolder;
width:100px;
height:35px;
}
</style>
<script language="javascript" type="text/javascript" >
function ponclik(i)
{
var div=document.getElementById("fill");
if(i==0)
{
div.style.width=2+'px';
}
div.style.width=parseInt(div.style.width )+2+'px';
var t=setTimeout('ponclik(1)',100);
if(parseInt(div.style.width) >296)
{
clearTimeout (t);
}
}
function ponclick2(i)
{
var div=document.getElementById("fill2");
if(i==0)
{
div.style.marginLeft=10+'px'
}
div.style.marginLeft=parseInt(div.style.marginLeft)+2+'px';
var t=setTimeout('ponclick2(1)',100);
if(parseInt(div.style.marginLeft)>285)
{
clearTimeout(t);
}
}
function moveclick(event)
{
var div=document.getElementById('fill3');
div.style.marginLeft=event.x-203;
}
</script>
<body >
<div id="imgnav">
<div id="gd1" class="gd1">
<div id="gdtext1">滚动条1</div>
<div id="border1">
<div id="fill""></div>
</div>
<input type="button" id="btngn1" value="查看效果" onclick="ponclik(0)" />
</div>
<div id="gd2">
<div id="gdtext2">滚动条2</div>
<div id="border2">
<div id="fill2">|</div>
</div>
<input type="button" id="btngd2" value="查看效果" onclick="ponclick2(0)" / >
</div>
<div id="gd3">
<div id="gdtext3">滚动条3</div>
<div id="border3" onmousedown="moveclick(event)">
<hr></hr>
<div id="fill3"></div>
</div>
<div id="divgd3">直接单击查看效果 </div>
</div>
</div>
</body>
</html>
