jquery
bootstrap
最近几年，很多IDC网站，都会有这种拖动计量的设计。方便用户录入所需要的配置。我很感兴趣，所以自己写了一个DEMO。在DEMO结构上，它主要有四个东西组成，计量条背景，已选中计量条，拖动点，以及输出文本的显示框。学习重点有，如何获取鼠标的位置，如何模拟制作鼠标拖动事件（默认是没这个事件的。）我们先来看一下效果。
css的话，bootstrap是必须的，再加上自己写的的一个盒模型、滚动条样式就可以了。代码如下：--------------------------------------------------------------------------------/*reset*/html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time {margin: 0; padding: 0;}h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th,figcaption {font-size: 1em; font-weight: normal; font-style: normal;}fieldset,iframe,img {border: none;}caption,th {text-align: left;}table {border-collapse: collapse; border-spacing: 0;}article,aside,footer,header,hgroup,nav,section,figure,figcaption {display: block;}ul,li,ol,dl,dt,dd {list-style: none;}/*scrollbar*/html {scrollbar-face-color:#97aac1;scrollbar-highlight-color:#ffffff;scrollbar-3dlight-color:#97aac1;scrollbar-darkshadow-color:#97aac1;scrollbar-shadow-color:#ffffff;scrollbar-arrow-color:#ffffff;scrollbar-track-color:#d7e0eb;}::-webkit-scrollbar {width: 5px;height: 5px;} ::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {border-radius: 999px;border:0px solid transparent;}::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(100,100,100,.7) inset;}::-webkit-scrollbar-thumb {min-height: 20px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(100,100,100,.5) inset;}::-webkit-scrollbar-corner {background:;transparent}/* 由于webkit这个样式，这个东西只能用于谷歌或Firefox等浏览器。 */--------------------------------------------------------------------------------
css代码：--------------------------------------------------------------------------------/*baes*/body {font-family:tahoma,'\5B8B\4F53'; font-size:12px;color:#555;}h1,h2,h3,h4,h5,h6 {font-family:tahoma,'\5FAE\8F6F\96C5\9ED1';}img {border: none;}a {text-decoration: none;color: #f60;font-weight: bold;}a:hover {text-decoration: underline;color: #06f;}a:focus,input:focus {outline:none;}a * {cursor: pointer;}.gehang {height: 20px;width: 20px;clear: both;}/* 网站局中盒子样式 */.cf:before, .cf:after {content:'';display:table;}.cf:after {clear:both;}.cf {zoom:1;}#main {width: 500px;margin: 100px auto;user-select:none;}#bar_bg {height: 14px;width: 500px;border-radius:7px;background: #e8e8e8;position: relative;}#bar_click {height: 20px;width: 20px;border-radius: 10px;background: #06f;margin-left: -10px;position: absolute;top: -3px;left: 0;cursor: pointer;box-shadow: 0 0 4px #000;border: 1px solid #5c9dff;}#bar_percent {height: 14px;border-radius: 7px;background: #f60;width: 0;}#bar_input {padding-top: 20px;font-size: 18px;}.main {width: 600px;margin: auto;}.main h1 {text-align: center;font-size: 24px;padding: 20px 0;color: #f60;}.main p {text-indent: 2em;line-height: 2;padding: 5px 0;}#copy {width: 600px;margin: auto;text-align: center;}--------------------------------------------------------------------------------css代码到此为止了，记得引入bootstrap的文件哦！
js的作用主要有两点：1、判断鼠标移动位置。2、动态更改样式。
代码如下：--------------------------------------------------------------------------------/* 动态更改样式*/$(function(){ var BarB = $('#bar_bg'), BarC = $('#bar_click'), BarP = $('#bar_percent'), BarI = $('#bar_input'), BarBW = BarB.width(), BarCMove=false, BarCX; BarC.mousedown(function(e){ BarCMove=true; var BarBX = parseInt(BarC.css('left')); BarCX=e.pageX-BarBX; }); --------------------------------------------------------------------------------
--------------------------------------------------------------------------------/*关于鼠标的判断 */ $(document).mousemove(function(e){ if(BarCMove){ var PageX = e.pageX; var CX=PageX-BarCX; if(CX<=0){ CX=0 }else if(CX>=BarBW){ CX = BarBW }else{ CX = PageX - BarCX; }; BarC.css({'left':CX}); BarP.css({'width':parseInt(CX/BarBW*100)+'%'}); BarI.text(parseInt(CX)+'MB'); } }).mouseup(function(){ BarCMove=false; });});--------------------------------------------------------------------------------
js的代码到这里就结束了，但是别忘了引入jquery文件！
接下来就是html部分了。记住，id和class一定要照应，要改都改，和css、js的对上！
代码如下：--------------------------------------------------------------------------------
注意id和class
注意引入文件路径要写对。