js版sliderBar(滑动条)控件

2022-07-15 80酷酷网 80kuku.com

　　js|控件

支持实时监控sliderbar的数据，允许有callback回调的函数，有示例

1、可自定样式SetStyle()
2、带有onSroll功能
3、有setSldPoint（设置位置)接口
4、有getSldPoint(取得位置）接口
5、可自己设置sliderBar的最大值（不是sliderbar的长度，而是值）
6、自定义微调功能（setIncrement(10))，默认为5；

代码有点乱，接口不能清晰的看出来，不好意思了，先用着吧

运行代码框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> never Slider Bar </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT="never-online, blueDestiny"><META NAME="Keywords" CONTENT="javascript Slider Bar"><META NAME="Description" CONTENT="javascript Slider Bar"><style>body { background-color:#fff; text-align:center; font-family:verdana; font-size:9pt; }.sliderObj { width:350px; height:25px; background-color:#fff; border:1px solid #666666; }.sliderBar { width:20px; background-color:#666666; border:1px solid #333; }.sliderBtn { width:30px; background-color:#666666; color:#fff; border:1px solid #000000; }.r-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #CC0000; }.r-sliderBar { width:20px; background-color:#CC0000; border:1px solid #333; }.r-sliderBtn { width:20px; background-color:#CC0000; color:#fff; border:1px solid #000000; }.g-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #006600; }.g-sliderBar { width:20px; background-color:#006600; border:1px solid #333; }.g-sliderBtn { width:20px; background-color:#006600; color:#fff; border:1px solid #000000; }.b-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #003399; }.b-sliderBar { width:20px; background-color:#003399; border:1px solid #333; }.b-sliderBtn { width:20px; background-color:#003399; color:#fff; border:1px solid #000000; }</style></HEAD><BODY><p><div id="s1"></div><p><div id="d1">r</div><p><div id="s2"></div><p><div id="d2">g</div><p><div id="s3"></div><p><div id="d3">b</div><p><div id="color" class="sliderObj"></div><SCRIPT LANGUAGE="JavaScript"></SCRIPT><p>power by never-online, blueDestiny, http://www.never-online.net</p></BODY></HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]