仿西街网的价格滚动功能

周末的时候本来是准备整理下网站的内容充实网站数据的，结果一个网友叫我帮忙改了点东西，之后有跟我提到了这个西街网的价格滚动的功能，感觉挺新奇的，我就试着仿了。。。估计中国山寨货多就是这么来的。。。要早点改了这毛病！手贱了。。。！

回到主题，说说这个功能的事，没有封装也没有代码优化，做好了就直接贴出来了。如果有bug或者不兼容的地方还请见谅！

#dragbar{ height:12px; position:relative; width:170px; top:26px; float:left;}
#long_bar{ height:0.6em; border:1px solid #aaa; border-radius:4px;}
#small_bar{ background:#ccc; position:absolute; z-index:1; top:0; height:100%;}
#long_bar .btn{ width:1.2em; z-index:2; position:absolute; height:1.2em; cursor:pointer; top:-0.3em; margin-left:-0.6em; background:#D72D2E; border-radius:4px; border:1px solid #D3D3D3;}
.price{ width:100px; padding:22px 5px 0; height:18px; color:#c90202; float:left; text-align:center;}

<div id="min_price" class="price" style="margin-right:5px;">100元</div>
<div id="dragbar">
 <div id="long_bar">
 <div id="small_bar"></div>
 <span class="btn"></span>
 <span class="btn"></span>
 </div>
</div>
<div id="max_price" class="price" style="margin-left:5px;">1319元</div>

window.onload=function(){
 var longbar=document.getElementById("long_bar");
 var smallbar=document.getElementById("small_bar");
 var arrbtn=longbar.getElementsByTagName("span");
 var minP=document.getElementById("min_price");
 var maxP=document.getElementById("max_price");
 var minprice=parseInt(minP.innerHTML);
 var maxprice=parseInt(maxP.innerHTML);
 var total=maxprice-minprice;
 smallbar.style.width=100+"%";
 smallbar.style.left=0;
 arrbtn[0].style.left=0;
 arrbtn[1].style.left=100+"%";
 
 var maxwidth=longbar.offsetWidth;//最大移动值
 
arrbtn[0].onmousedown=function(e){
 var x=(e||window.event).clientX;//取点击位置的X轴长度值
 //按钮的x轴长度值
 var lenght=this.offsetLeft+(this.offsetWidth/2);
 var btn2lenght=arrbtn[1].offsetLeft+(arrbtn[1].offsetWidth/2);
 var maxlenght=Math.min(maxwidth,btn2lenght);
 var btn=this;
 document.onmousemove=function(e){
 var thisX=(e||window.event).clientX;//当前移动位置的X轴长度值
 var golenght=Math.min(maxlenght-1,Math.max(0,lenght+(thisX-x)));//移动的长度
 var leftVal=(golenght/maxwidth)*100;
 btn.style.left=leftVal+"%";//使用百分比
 smallbar.style.left=btn.style.left;
 smallwidth();
 price(minP,leftVal);
 window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty();//判断是否有选中项
 }
 document.onmouseup=new Function('this.onmousemove=null');
 }
 arrbtn[1].onmousedown=function(e){
 var x=(e||window.event).clientX;
 var lenght=this.offsetLeft+(this.offsetWidth/2);
 var btn1lenght=arrbtn[0].offsetLeft+(arrbtn[0].offsetWidth/2);
 var minlenght=Math.max(0,btn1lenght);
 var btn1=this;
 document.onmousemove=function(e){
 var thisX=(e||window.event).clientX;
 var golenght=Math.max(minlenght-1,Math.min(maxwidth,lenght+(thisX-x)));
 var leftVal=(golenght/maxwidth)*100;
 btn1.style.left=leftVal+"%";
 smallwidth();
 price(maxP,leftVal);
 window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty();
 }
 document.onmouseup=new Function('this.onmousemove=null');
 }
 function smallwidth(){
 var left=parseFloat(arrbtn[0].style.left);
 var right=parseFloat(arrbtn[1].style.left);
 smallbar.style.width=Math.floor(right-left)+"%";
 }
 function price(obj,leftVal){
 var p=parseInt((total/100)*leftVal)+minprice;
 if(p!=minprice && p!=maxprice){p=p%5>3?p+(5-(p%5)):p-(p%5)}
 obj.innerHTML=p+"元";
 }
}

demo地址：http://cowll.com/demo/xijie2.html
已更新在IE中的兼容性问题和操作上得体验不好问题，代码就不重复贴出来了，可以再demo中查看！