never sliderbar（js版简单的滑动条控件）-控件新闻-慧都网

never sliderbar（js版简单的滑动条控件）

翻译|其它|编辑：郝浩|2006-07-06 16:19:00.000|阅读 1999 次

概述：

支持实时监控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> <br /> 标签：  <div class="artCopy prColor2"> <p>本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com</p> </div> <br />  <div class="moreArt"> <a class="prevArt" href="/article/2006/7/7/6590.html">上一篇：利用VS.NET为PDA应用程序创建饼图控件(一)</a> <a class="nextArt" href="/article/2006/7/6/6588.html">下一篇：分享一下ExpressQuantumGrid4的cxGrid的一些使用方法和经验</a> </div> </div> </div> <div class="mallPro"></div>   <div class="recommend"> <h3>为你推荐</h3> <ul class="leftList"> <li class="show">推荐视频</li> <li>推荐活动</li> <li>推荐产品</li> <li>推荐文章</li> <li><a href="/forum/threads/?o=new" target="_blank">慧都慧问</a></li> </ul> <div class="splitline"></div> <div class="rightCon"> <div class="rightCon0 rightList"> <div class="train"> <a href="/video/4097" target="_blank"> <img src="https://image.evget.com/Content/images/202506/17/17501252331.png"> <p>国产化文档处理组件Spire.Doc视频教程：Word文档添加重复水印</p> </a> <a href="/video/4096" target="_blank"> <img src="https://image.evget.com/Content/images/202506/17/17501251501.png"> <p>国产化文档处理组件Spire.Doc视频教程：为Word文档添加页眉页脚</p> </a> <a href="/video/4095" target="_blank"> <img src="https://image.evget.com/Content/images/202506/17/17501250725.png"> <p>国产化文档处理组件Spire.Doc视频教程：改变Word文档的字体</p> </a> </div> <div class="train"> <a href="/video/4093" target="_blank"> <img src="https://image.evget.com/Content/images/202506/17/17501248657.png"> <p>国产化文档处理组件Spire.Doc视频教程：Word文档添加或提取附件</p> </a> <a href="/video/4092" target="_blank"> <img src="https://image.evget.com/Content/images/202506/17/17501247549.png"> <p>国产化文档处理组件Spire.Doc视频教程：改变Word文档的页面布局</p> </a> <a href="/video/4091" target="_blank"> <img src="https://image.evget.com/Content/images/202506/17/17501246667.png"> <p>国产化文档处理组件Spire.Doc视频教程：Word文档的比较功能</p> </a> </div> </div> <div class="rightCon1 rightList" style="display: none;"> <div> <a target="_blank" href="https://www.evget.com/article/2021/9/8/43097.html"><img src="https://image.evget.com/Content/images/202109/15/5ba6a5a41555df00520e7be647e791be.jpg" alt="购MMA永久版送Wolfram System Modeler永久版" width="100%" onerror="this.src='/static/images/error3_2.jpg'"/></a> </div> <div> <a target="_blank" href="https://www.evget.com/article/2021/1/6/40000.html?1v1huodong"><img src="https://image.evget.com/Content/images/202101/07/f2a85a1364971623b4837843bec2cab5.jpg" alt="哪些企业想实现数字化转型？这里有专家在线问诊！" width="100%" onerror="this.src='/static/images/error3_2.jpg'"/></a> </div> <div> <a target="_blank" href="https://www.evget.com/article/2020/11/11/39106.html"><img src="https://image.evget.com/Content/images/202011/11/d6c9199344ed7d24cd22fcd390d4337a.png" alt="CADSoftTools & 慧都年终联合大促" width="100%" onerror="this.src='/static/images/error3_2.jpg'"/></a> </div> <div> <a target="_blank" href="https://www.evget.com/article/2020/10/19/38689.html"><img src="https://image.evget.com/2020/10/19/900-500j5f8y88158tsgxl2.jpg" alt="2020慧都软件国产化服务季正式开启·DevExpress超值优惠套包全新放送！" width="100%" onerror="this.src='/static/images/error3_2.jpg'"/></a> </div> </div> <div class="rightCon2 rightList" style="display: none;"> <div class="proItem"> <div class="topItem"> <div class="itemImg"><img src="https://image.evget.com/Content/images/202003/06/b1df446cee0366143f505d52da2c3690.png" onerror="javascript:this.src='/static/images/error3_2.jpg';"></div> <div class="itemInfo"> <a target="_blank" href="/product/740">DevExpress Universal Subscription</a> <p class="prColor2">优秀的界面控件开发包，帮助企业构建卓越应用！</p> <div class="botItem"> <span> <span class="fun"># 非开源 #</span> </span> <span class="label"># 控件 #</span> </div> </div> </div> </div> <div class="proItem"> <div class="topItem"> <div class="itemImg"><img src="https://image.evget.com/Content/images/202003/06/ae0f8807ebef31268777953f6c782e0d.png" onerror="javascript:this.src='/static/images/error3_2.jpg';"></div> <div class="itemInfo"> <a target="_blank" href="/product/2349">DevExpress DXperience Subscription</a> <p class="prColor2">高性价比的企业级.NET用户界面套包，助力企业创建卓越应用！</p> <div class="botItem"> <span> <span class="fun"># 非开源 #</span> </span> <span class="label"># 控件 #</span> </div> </div> </div> </div> <div class="proItem"> <div class="topItem"> <div class="itemImg"><img src="https://image.evget.com/Content/images/202205/11/16522500552.jpg" onerror="javascript:this.src='/static/images/error3_2.jpg';"></div> <div class="itemInfo"> <a target="_blank" href="/product/4186">慧都智能制造全链路解决方案</a> <p class="prColor2">慧都智能制造解决方案，赋能制造业数字化转型升级</p> <div class="botItem"> <span> <span class="fun"># 非开源 #</span> </span> <span class="label"># 软件 #</span> </div> </div> </div> </div> <div class="proItem"> <div class="topItem"> <div class="itemImg"><img src="https://image.evget.com/Content/images/202004/09/a49b0e8073893488fa0022d4e2286c23.png" onerror="javascript:this.src='/static/images/error3_2.jpg';"></div> <div class="itemInfo"> <a target="_blank" href="/product/2348">DevExpress WinForms Subscription</a> <p class="prColor2">为Windows Forms平台创建具有影响力的业务解决方案，高性价比WinForms界面控件套包。</p> <div class="botItem"> <span> <span class="fun"># 非开源 #</span> </span> <span class="label"># 控件 #</span> </div> </div> </div> </div> </div> <div class="rightCon3 rightList" style="display: none;"> <div class="artItem"> <div class="topItem"> <div class="itemImg"> <img src="https://image.evget.com/Content/images/202109/28/47bb04e3d4fb44d8b5debef744600b70.jpg" onerror="javascript:this.src='/static/images/error3_2.jpg';"> </div> <div class="itemInfo"> <a class="prColor3" target="_blank" href="/article/2021/9/28/43311.html">【国内成功案例】慧都3D解决方案助力清软英泰建成综合轻量化显示平台</a> <p class="prColor2">面对“数字中国”建设和中国制造2025战略实施的机遇期，中车信息公司紧跟时代的步伐，以“集约化、专业化、标准化、精益化、一体化、平台化”为工作目标，大力推进信息服务、工业软件等核心产品及业务的发展。在慧都3D解决方案的实施下，清软英泰建成了多模型来源的综合轻量化显示平台、实现文件不失真的百倍压缩比、针对模型中的大模型文件，在展示平台上进行流畅展示，提升工作效率，优化了使用体验。</p> <div class="botItem"> <a href="https://www.evget.com/news/article/list/type/5" class="type"># 其它 #</a> <span class="prColor4"><img class="icon" src="/static/images/article/shijian.png" alt=""><span class="creatTime">2021-09-28 17:47:48.373</span></span> <span class="count prColor4"><img class="icon" src="/static/images/article/yuedu.png" alt="">275次</span> </div> </div> </div> </div> <div class="artItem"> <div class="topItem"> <div class="itemImg"> <img src="https://image.evget.com/Content/images/202109/22/95d496cb3fd57f677988835e23f760d5.jpg" onerror="javascript:this.src='/static/images/error3_2.jpg';"> </div> <div class="itemInfo"> <a class="prColor3" target="_blank" href="/article/2021/9/22/43232.html">【SolidWorks免费模型下载】：三相交流机免费模型下载</a> <p class="prColor2">本站的模型资源均免费下载，登录后即可下载。模型仅供学习交流，勿做商业用途。</p> <div class="botItem"> <a href="https://www.evget.com/news/article/list/type/5" class="type"># 其它 #</a> <span class="prColor4"><img class="icon" src="/static/images/article/shijian.png" alt=""><span class="creatTime">2021-09-22 11:16:02.260</span></span> <span class="count prColor4"><img class="icon" src="/static/images/article/yuedu.png" alt="">1638次</span> </div> </div> </div> </div> <div class="artItem"> <div class="topItem"> <div class="itemImg"> <img src="https://image.evget.com/Content/images/202109/14/e8d22f4b437882dfe62390d0dfc2f1db.jpg" onerror="javascript:this.src='/static/images/error3_2.jpg';"> </div> <div class="itemInfo"> <a class="prColor3" target="_blank" href="/article/2021/9/14/43150.html">【SolidWorks免费模型合集】：食品原料清洗机免费模型下载</a> <p class="prColor2">本站的模型资源均免费下载，登录后即可下载。模型仅供学习交流，勿做商业用途。</p> <div class="botItem"> <a href="https://www.evget.com/news/article/list/type/5" class="type"># 其它 #</a> <span class="prColor4"><img class="icon" src="/static/images/article/shijian.png" alt=""><span class="creatTime">2021-09-14 12:00:53.357</span></span> <span class="count prColor4"><img class="icon" src="/static/images/article/yuedu.png" alt="">654次</span> </div> </div> </div> </div> <div class="artItem"> <div class="topItem"> <div class="itemImg"> <img src="https://image.evget.com/Content/images/202109/06/843ab93cdc776111ca9bed20294a1091.jpg" onerror="javascript:this.src='/static/images/error3_2.jpg';"> </div> <div class="itemInfo"> <a class="prColor3" target="_blank" href="/article/2021/9/6/43076.html">【SolidWorks免费模型下载】：多轴钻免费模型下载</a> <p class="prColor2">本站的模型资源均免费下载，登录后即可下载。模型仅供学习交流，勿做商业用途。</p> <div class="botItem"> <a href="https://www.evget.com/news/article/list/type/5" class="type"># 其它 #</a> <span class="prColor4"><img class="icon" src="/static/images/article/shijian.png" alt=""><span class="creatTime">2021-09-06 13:56:55.123</span></span> <span class="count prColor4"><img class="icon" src="/static/images/article/yuedu.png" alt="">733次</span> </div> </div> </div> </div> </div> </div> </div> <script> // 为你推荐 $('.leftList li').click(function () { var index=$(this).index(); if($(this).hasClass("show")){ return; } $(this).addClass("show").siblings().removeClass("show"); $(".rightList").css("display","none"); $(".rightCon"+index+"").css("display","block"); }); </script> </div> <div class="col-lg-3 removeLeftPad hidden-m">   <div data-mode="ad" data-key="mallpush"></div>    <div class="rarticles slide-box"> <span class="slide-tit"><img class="sicon" src="/static/images/vipvideo/xiangguan.png">相关文章 <a href="/news/5" target="_blank">MORE <img src="/static/images/vipvideo/jia.png"></a></span> <ul class="otherList"> <li> <a href="/article/2021/9/28/43311.html" target="_blank">【国内成功案例】慧都3D解决方案助力清软英泰建成综合轻量化显示平台</a> </li> <li> <a href="/article/2021/9/22/43232.html" target="_blank">【SolidWorks免费模型下载】：三相交流机免费模型下载</a> </li> <li> <a href="/article/2021/9/14/43150.html" target="_blank">【SolidWorks免费模型合集】：食品原料清洗机免费模型下载</a> </li> <li> <a href="/article/2021/9/6/43076.html" target="_blank">【SolidWorks免费模型下载】：多轴钻免费模型下载</a> </li> <li> <a href="/article/2021/8/31/43007.html" target="_blank">【SolidWorks免费模型下载】：机械臂免费模型下载</a> </li> </ul> </div>   <div data-mode='ad' data-key='common-390'></div> <div class="rfixed"><a href="https://www.evget.com/mis"> <img src="https://image.evget.com/2021/06/15/yiv8g9dk29xi2jdla.jpg" alt="业务系统定制" width="100%" /> </a></div> </div> </div> </div> <script src='https://res.wx.qq.com/open/js/jweixin-1.4.0.js' type='text/javascript' charset='utf-8'></script> <script> // 链接添加颜色 $('div.artDet .artCon a').each(function () { if ($(this).hasClass('artTop') || $(this).hasClass('prevArt') || $(this).hasClass('linkbutton') || $(this).hasClass('nextArt')) { } else { $(this).css('color', '#0071b0') } }) setTimeout(function () { JsonAPI({ 'c': 'Article', 'a': 'articleattr', 't': getCookie('rptoken'), 'data': 'id=6589&type=ClickCount' }, function (res) { }); if ($(".supList").length > 0) { var ht = $(".supList").html(); var reg = new RegExp("supplier/(\\d*)"); var regalt = new RegExp('alt="(\\w*)"'); var arr = ht.match(reg); var alts = ht.match(regalt); } try { if (arr && arr[1] != undefined) { loadrsp(arr[1], '.mallPro'); } else { loadrsp(0, '.mallPro'); } } catch (e) { console.log(e); } }, 2000); var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { $.post("/article/2006/7/6/6589.html",{title:'never sliderbar（js版简单的滑动条控件）',image:'',description:'',url:location.href},function(res){ $('.footer').after(res); }); } var btop = $('.rfixed').offset().top - 80; var bleft = $('.rfixed').offset().left; $(window).scroll(function () { var ntop = $(document).scrollTop(); if (ntop > btop) { $('.rfixed').css({ 'position': 'fixed', 'top': '80px', 'left': bleft, 'width': '340px', 'background': '#fff', 'z-index': 10, 'margin-top': 0 }); } else { $('.rfixed').removeAttr("style"); } }); </script> <style> .rfixed{display: none;} </style> <div data-mode="ad" data-key="poprba"></div> <style> .phonefooter { display: none; } @media(max-width:792px) { .phonefooter { color: aliceblue; font-size: 18px; display: block; } .phonefooter .Servicephone { display: flex; justify-content: space-evenly; align-items: center; } .attention div { display: flex; justify-content: space-evenly; align-items: center; } .attention div img { width: 30%; padding: 4px; background-color: aliceblue; } .phonefooter p { color: #999; } .phonefooter>p, .phonefooter .attention>p { padding-left: 2rem; } .phonefooter>p::before { content: ""; position: absolute; height: 25px; width: 6px; left: 10px; background-color: tomato; } .Customesupport { display: grid; justify-content: start; align-items: center; padding-left: 1rem; } .Customesupport>p { line-height: 30px; } .evget_phone_footer { display: flex !important; } .footer { padding: 15px 0 75px 0; } } .tipNav #ev-right-400 .rntel { width: 180px; left: -191px; } .tipNav #ev-right-400 .rntel div p { margin: 0 0 0 5px; } .tipNav #ev-right-400 .rntel div { margin: 0; padding: 10px 0 10px 15px; } .tipNav #ev-right-400:hover .rntel div:after { left: 180px; top: 81px; } .tipNav #ev-right-400:nth-child(2):hover .rntel div:after { top: 24px; } .tipNav { height: 249px; } .swiper-container { z-index: 0; } .evget_phone_footer { position: fixed; background-color: #fbfbfb; width: 100%; height: 60px; bottom: 0; display: none; justify-content: center; gap: .8rem; align-items: center; z-index: 999; } .evget_weixin, .evget_phone { width: 40%; font-size: 17px; text-align: center; padding: 8px 0; border-radius: 50px; border: 1px solid #fa5512; } .evget_phone { background-color: #fa5512; font-weight: 600; } .evget_phone>a { color: #fff; width: 100%; height: 100%; display: inline-block; } .evget_phone>a>.fa { color: #fff; padding-right: 10px; } .evget_weixin>div>a{ width: 100%; height: 100%; display: inline-block; } .evget_weixin>div>a>.fa { color: #fa5512; padding-right: 10px; } .evget_weixin>div>a { color: #fa5512; font-weight: 600; } </style> <div class="footer"> <div class="footer-con"> <div class="footer-top"> <h4>用科技创就卓越</h4> <h4>Create excellence with technology</h4> </div> <div class="footer-mid"> <div class="mid-left"> <dl> <dt>智能制造解决方案</dt> <dd> <a href="/solution/solidworks">工业设计</a> <a href="/solution/aps-plus">运营管理</a> <a href="/solution/mes">生产管理</a>  </dd> </dl> <dl> <dt>石油工程解决方案</dt> <dd> <a href="/solution/energy">油气勘探数字化</a> <a href="/solution/energy/energyuicase">钻井工程数字化</a> <a href="/tecserv/bigdata">数据管理与分析</a>  </dd> </dl> <span></span> <dl> <dt>关于我们</dt> <dd> <a href="/about/intro">慧都简介</a> <a href="/news/8">公司动态</a> <a href="/about/contact">业务区域</a> <a href="/anli">典型案例</a> </dd> </dl> <dl> <dt>区域服务电话</dt> <dd> <span>重庆 / 023-68661681</span> <span>华东 / 13452821722</span> <span>华南 / 18166486035</span> <span>华北 / 17347785263</span> </dd> </dl> <dl> <dt>客户支持</dt> <dd class="bnc"> <a href="/qiye">技术培训</a><i>/</i> <a href="/consulting">咨询服务</a> <a href="tel:400-700-1020" rel='nofollow'>服务热线：400-700-1020</a> <a href="mailto:sales@evget.com" rel='nofollow'>邮箱：sales@evget.com</a> <a href="javascript:showQywx();" class="qqchart"><img src="/static/images/qywxicon.png"> 微信</a> <a href="javascript:callService(0);" class="zx"><img src="/static/images/zx2.png" alt="">在线咨询</a> </dd> </dl> </div> <div class="mid-right"> <div> <img src="/static/images/code_wx.jpg" alt=""> </div> <p>官方公众号</p> <div> <img style="width:64px;" src="https://image.evget.com/2025/02/08/IMG_6026myh0brn7lw3xhxcu.jpg" alt=""> </div> <p>官方视频号</p> </div> </div> </div> <div class="phonefooter"> <p>服务电话</p> <div class="Servicephone"> <div> <p>重庆/ 023-68661681</p> <p>华东/ 13452821722</p> </div> <div> <p>华南/ 18100878085</p> <p>华北/ 17347785263</p> </div> </div> <p>客户支持</p> <div class="Customesupport"> <p><span>技术支持</span><span>咨询服务</span></p> <p>服务热线：400-700-1020</p> <p>邮箱：sales@evget.com</p> </div> <p>关注我们</p> <div class="attention"> <p>地址 : 重庆市九龙坡区火炬大道69号6幢</p> <div> <img src="https://www.evget.com/static/images/code_wx.jpg" alt=""> <img src="https://image.evget.com/Content/images/202002/28/a875873e0158bee165ee0a8a01f7b9c4.png" alt=""> </div> </div> </div> <div class="f-bottom"> <p>慧都科技版权所有 Copyright 2003- 2025 <a href="http://beian.miit.gov.cn/" style="color: #888;" target=_blank>渝ICP备12000582号-13</a> <a href="http://113.207.120.45:7010/wljyzbs/index.html?sfdm=120200827150645802806#/index.html?sfdm=120200827150645802806"><img src="/static/images/jin_09.png" alt=""></a><img src="/static/images/jin_11.png" alt="">渝公网安备 50010702500608号  </p> </div> </div>  <div class="tipNav hidden-m"> <div id="ev-right-400" href="javascript:;" style="background-image: linear-gradient(0deg, #fa5512 0%, #fb8c56 100%);"> <span style="color: #fff;">扫码咨询</span> <div class="rntel" style="top: -40px;"> <div> <p><img src="https://image.evget.com/2024/08/05/weixinldnb5wnzcnat6d4r.jpg" width="120" /><br /> 添加微信立即咨询</p> </div> </div> </div> <div id="ev-right-400" href="javascript:;"> <span>电话咨询</span> <div class="rntel" style="top: 128px;"> <div> <p><img src="https://image.evget.com/2021/03/05/tel_hover_067a2cdetgn59b2ncjkkkim.png" />客服热线<br /><a href="tel:023-68661681" style="color: #fa555c; margin-left: 32px;">023-68661681</a></p> </div> </div> </div> <a id="ev-right-back" class="toTop returnToTop" href="javascript:;"><i class="fa fa-angle-up"></i><b>TOP</b></a> </div> <script src="/static/scripts/all2021.jquery.js?t=2025231"></script> <div class="evget_phone_footer"> <div class="evget_weixin" id="openwechat"> <div><a href="https://work.weixin.qq.com/ca/cawcde74068310031c"><i class="fa fa-weixin" aria-hidden="true" /></i>微信</a></div> </div> <div class="evget_phone"> <a href="tel:023-68661681"> <i class="fa fa-phone" aria-hidden="true" /></i>电话 </a> </div> </div> </body> </html>

在线采购

中文文档库

试用/Demo下载

开发社群

never sliderbar（js版简单的滑动条控件）