周末的时候本来是准备整理下网站的内容充实网站数据的，结果一个网友叫我帮忙改了点东西，之后有跟我提到了这个西街网的价格滚动的功能，感觉挺新奇的，我就试着仿了。。。估计中国山寨货多就是这么来的。。。要早点改了这毛病！手贱了。。。！
回到主题，说说这个功能的事，没有封装也没有代码优化，做好了就直接贴出来了。如果有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" >100元</div>
<div id="dragbar">
<div id="long_bar">
<div id="small_bar"></div>
<span ></span>
<span ></span>
</div>
</div>
<div id="max_price" >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中查看！
仿西街网的价格滚动功能
TAG:javascript 西街网
