- <style>
- .sell-ratio{
- height: 50px;
- position: absolute;
- top: 100px;
- left: 200px;
- }
- .progress{
- width:300px;margin:0 auto;
- }
- .scale_panel{
- color:#999;
- width:200px;
- position:absolute;
- line-height:18px;
- left:60px;
- top:22px;
- }
- .scale #btn{
- background:#ccc;
- width:12px;
- height:12px;
- position:absolute;
- left:-2px;
- top:-3px;
- cursor:pointer;
- border-radius:50%;
- }
- .scale{
- background-repeat: repeat-x;
- background-position: 0 100%;
- background-color: #E4E4E4;
- border-left: 1px #83BBD9 solid;
- width: 200px; height: 5px;
- position: relative;
- font-size: 0px;
- border-radius: 2px; }
- .scale div{
- background-repeat: repeat-x;
- background-color: #14b9d6;
- width: 0px;
- position: absolute;
- height: 5px;
- border-radius: 2px;
- width: 0;
- left: 0;
- bottom: 0;
- }
- .progress .inside{font-size:12px;line-height:50px;position:relative;height:50px;list-style:none;}
- .progress #title{
- position: absolute;
- left: -16px;
- color: #fff;
- top: -29px;
- border-radius: 3px;
- background: #14b9d6;
- width: 40px;
- text-align: center;
- line-height: 20px;
- }
- .progress #title:before{
- content:"";
- display: block;
- position: absolute;
- left:15px;
- bottom:-10px;
- border:5px solid transparent;
- border-top:5px solid #14b9d6;
- }
- </style>
- <div class="sell-ratio">
- <div class="progress">
- <div class='inside'> 出售系数
- <div class="scale_panel">
- <label id="title">0</label>
- <div class="scale" id="bar">
- <div></div>
- <span id="btn"></span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script>
- var scale = function (){
- this.btn=document.getElementById("btn");
- this.bar=document.getElementById("bar");
- this.title=document.getElementById("title");
- this.step=this.bar.getElementsByTagName("div")[0];
- this.init();
- };
- scale.prototype={
- init:function (){
- var f=this,g=document,b=window,m=Math;
- f.btn.onmousedown=function (e){
- var x=(e||b.event).clientX;
- var l=this.offsetLeft;
- var max=f.bar.offsetWidth-this.offsetWidth;
- g.onmousemove=function (e){
- var thisX=(e||b.event).clientX;
- var to=m.min(max,m.max(-2,l+(thisX-x)));
- f.btn.style.left=to+'px';
- f.title.style.left= (to-14)+"px"
- f.ondrag(m.round(m.max(0,to/max)*100),to);
- b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
- };
- g.onmouseup=new Function('this.onmousemove=null');
- };
- },
- ondrag:function (pos,x){
- this.step.style.width=Math.max(0,x)+'px';
- this.title.innerhtml=pos;
- }
- }
- new scale()
- </script>
来源: http://www.qdfuns.com/article/27045/0a2157af9b4c83b629b23800ed3865f2.html