仿汽车之家搜索页价格签区间（鼠标拖拽同时tip提示）

来个效果图给大家看看：

套用别人写好的插件，在基础上修改了一下：

(function($){
    
    $.extend({
        //获取鼠标当前坐标
            mouseCoords:function(ev){
                if(ev.pageX || ev.pageY){
                    return {x:ev.pageX, y:ev.pageY};}
                return {
                    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y:ev.clientY + document.body.scrollTop  - document.body.clientTop
                };
            },
        //获取样式值
            getStyle:function(obj,styleName)
            {
                return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName];
    //                return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
            }
       });  

    // 元素拖拽插件
        $.fn.dragDrop = function(options)
        {
            var opts = $.extend({},$.fn.dragDrop.defaults,options);
            return this.each(function(){
            //是否正在拖动
                    var bDraging = false;   
            //移动的元素
                    var moveEle = $(this);
            //点击哪个元素，以触发移动。
                    //该元素需要是被移动元素的子元素（比如标题等）
                    var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ;
                    if(!focuEle || focuEle.length<=0)
                    {
                        alert('focuEle is not found! the element must be a child of '+this.id);
                        return false;
                    }                

            // initDiffX|Y : 初始时，鼠标与被移动元素原点的距离
                    // moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值)
                    // 如果定义了移动中的回调函数，该对象将以参数传入回调函数。
                    var dragParams = {initDiffX:'',initDiffY:'',moveX:'',moveY:''}; 
            //被移动元素，需要设置定位样式，否则拖拽效果将无效。
/*********/
            //lu.wang  注释掉 当前没用
                   // moveEle.css({'position':'absolute','left':'0','top':'0'}); 
            //点击时，记录鼠标位置
                    //DOM写法： getElementById('***').onmousedown= function(event);
                    focuEle.bind('mousedown',function(e){                
                        //标记开始移动
                            bDraging = true;
                            //改变鼠标形状
                            moveEle.css({'cursor':'move'});
                            //捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外）
                            if(moveEle.get(0).setCapture)
                            {  
                                moveEle.get(0).setCapture();  
                             }     
        
                        //（实际上是鼠标当前位置相对于被移动元素原点的距离）
                                 // DOM写法：(ev.clientX + document.body.scrollLeft - document.body.clientLeft) - document.getElementById('***').style.left;
        
                            dragParams.initDiffX = $.mouseCoords(e).x - moveEle.position().left;
                            dragParams.initDiffY = $.mouseCoords(e).y - moveEle.position().top;
        
                     });

            //移动过程
                    focuEle.bind('mousemove',function(e){
                        if(bDraging)
                        {    
                    //被移动元素的新位置，实际上鼠标当前位置与原位置之差
                                //实际上，被移动元素的新位置，也可以直接是鼠标位置，这也能体现拖拽，但是元素的位置就不会精确。
                            dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX;
                            dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY;
                    //是否限定在某个区域中移动.
                                //fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值]
                            
                            if(opts.fixarea)
                            {    
                                if(dragParams.moveX<opts.fixarea[0])
                                {
                                    dragParams.moveX=opts.fixarea[0]
                                }
                                if(dragParams.moveX>opts.fixarea[1])
                                {
                                    dragParams.moveX=opts.fixarea[1]
                                }
                                if(dragParams.moveY<opts.fixarea[2])
                                {
                                    dragParams.moveY=opts.fixarea[2]
                                }
                                if(dragParams.moveY>opts.fixarea[3])
                                {
                                    dragParams.moveY=opts.fixarea[3]
                                }    
                            }
                            
                            ////lu.wang 增加筛选条件（）
                            if(moveEle.context.className=="btn-price btn-left"){
                                opts.fixarea[1]=parseFloat($('.btn-right').css("left"));
                            }else{
                                opts.fixarea[0]=parseFloat($('.btn-left').css("left"));
                            }

                    //移动方向：可以是不限定、垂直、水平。
                            if(opts.dragDirection=='all')
                            {
                                //DOM写法： document.getElementById('***').style.left = '***px'; 
                                              //  moveEle.css({'left':dragParams.moveX,'top':dragParams.moveY});
                                moveEle.css({'left':dragParams.moveX});
                            }
                            else if (opts.dragDirection=='vertical')
                            {
                                //moveEle.css({'top':dragParams.moveY});
                            }
                            else if(opts.dragDirection=='horizontal')
                            {
                                moveEle.css({'left':dragParams.moveX});
                            }
                    //如果有回调
                            if(opts.callback)
                            {
                                //将dragParams作为参数传递
                                opts.callback.call(opts.callback,dragParams);
                            }
                }

             });

            //鼠标弹起时，标记为取消移动
                   focuEle.bind('mouseup',function(e){
                    bDraging=false;
                    moveEle.css({'cursor':'default'});
                    if(moveEle.get(0).releaseCapture)
                    {
                        moveEle.get(0).releaseCapture();
                    }
                    getSelect();
                });
        });
    };
    //默认配置
        $.fn.dragDrop.defaults = 
        {
            focuEle:null,            //点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。
            callback:null,            //拖动时触发的回调。
            dragDirection:'all',    //拖动方向：['all','vertical','horizontal']
            fixarea:null            //限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY]
        };
})(jQuery);   

html部分，大家可以拿去直接用哈~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
.price-dd-choose{width:610px;height:80px;float:left;font:12px/1.5 "宋体",arial,tahoma,sans-serif;}
.price-range .btn-price, .price-range .slider-ul li .icon-dian{background:url(pricerange_bg_24.png) no-repeat;_background:url(/Images/new_grade/rankchannel.png) no-repeat}
.price-range{height:40px;margin-top:40px;position:relative}
.price-range .price-range-slider{width:570px;height:10px;overflow:hidden;position:absolute;top:0;left:10px;background-color:#f8f8f8}
.price-range .bg-darkgrey{width:570px;height:10px;overflow:hidden;position:absolute;top:0;left:0;background-color:#ccd3e4}
.price-range .bg-darkgrey-hand{width:570px;height:10px;overflow:hidden;position:absolute;top:0;left:0;cursor:pointer;z-index:5}
.price-range .slider-ul{width:570px;height:10px;padding:0;overflow:hidden;cursor:pointer;position:absolute;top:-12px; list-style:none;}
.price-range .slider-ul li{width:57px;height:10px;float:left;position:relative;color:#999;}
.price-range .slider-ul li.slider-ul-first{width:34px}
.price-range .slider-ul li .icon-dian{width:8px;height:9px;line-height:0;overflow:hidden;background-position:-6px -26px;position:absolute;right:-4px;_background-position:-54px -159px;_top:1px}
.price-range .btn-price{display:inline-block;width:21px;height:21px;position:absolute;top:-6px;z-index:10;cursor:pointer}
.price-range .btn-left{_background-position:0 -151px}
.price-range .btn-right{_background-position:-26px -151px}
.price-range .slide-selected{height:8px;line-height:0;overflow:hidden;background-color:#3b5998;position:absolute;top:0;left:10px;z-index:6;border-top:1px solid #ebebeb;border-bottom:1px solid #ebebeb;cursor:pointer; float:left;}
.price-range .tip{top:-36px}
.price-range .tip-content{min-width:30px;line-height:22px;padding:0 10px;color:#666666;overflow:hidden;text-align:center;white-space:nowrap;font-size:14px}
.price-range .tip-top{left:38%}
.price-range .price-range-text{height:20px;padding-top:15px;color:#999999; float:left;}
.price-range .price-range-text .number{display:inline-block;width:57px;height:20px;line-height:20px;float:left}
.price-range .price-range-text .number-first{width:34px}


.tip{
    min-width:50px;
    max-width:250px;
    position:absolute;
    z-index:100;
    padding:2px;
    background:url(shadow_bg.png) repeat;
    font-size:12px;
    float:left
}

.tip .tip-content{
    position:relative;
    z-index:1;
    border:1px solid #ccd3e4;
    background-color:#FFF;
    padding:5px;
    line-height:18px;
    font-size:12px
}

.tip .tip-arrow{
    display:inline-block;
    overflow:hidden;
    position:absolute;
    z-index:2;
    background:url(layer_arrow24.png) no-repeat;
    _background:url(layer_arrow8.png) no-repeat
}

.tip .tip-top,.tip .tip-bottom{
    width:15px;
    height:11px
}

.tip .tip-left,.tip .tip-right{
    width:11px;
    height:15px
}

.tip .tip-top{
    bottom:-8px;
    left:43%;
    background-position:0 -36px
}

.tip .tip-bottom{
    top:-8px;
    left:43%;
    background-position:0 -26px
}

.tip .tip-left{
    top:30%;
    right:-8px;
    background-position:-30px -29px
}

.tip .tip-right{
    top:30%;
    left:-8px;
    background-position:-20px -29px
}

</style>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="mouseDragDrop.js"></script>

<script type="text/javascript">

        
   $(function(){
//限定区域，有回调函数。
        var width=parseInt($('.slide-selected').css("width"));
        var left=parseInt($('.slide-selected').css("left"));
        
        $(".tip-content").find("div:eq(0)").css("display","inline");
        
        //左侧移动
        $('.btn-left').dragDrop({fixarea:[0,parseFloat($('.btn-right').css("left")),0,0],callback:function(params){
            
            var len1=parseFloat($(".btn-left").css("left"));
            var len2=parseFloat($(".btn-right").css("left"));
            $(".slide-selected").css("left",params.moveX+10.5);
            $(".slide-selected").css("width",len2-len1);
            
            
            var len3=parseFloat($(".slide-selected").css("left"))+(parseFloat($(".slide-selected").width())-parseFloat($(".tip").width()))/2;
            $(".tip").css("left",len3);
            
            //tip文字
            var moveX=params.moveX;
            var price=getPrice(params.moveX);
            if(57*9+34<=moveX){
                $(".tip-content").find("div:eq(0)").css("display","none");
                $(".tip-content").find("div:eq(1)").css("display","inline");
            }else{
                $(".tip-content").find("div:eq(0)").css("display","inline");
                $(".tip-content").find("div:eq(1)").css("display","none");
                $(".tip-content").find("span:eq(0)").text(price);
            }
            
            
        }});
        
        //右侧移动
        $('.btn-right').dragDrop({fixarea:[parseFloat($('.btn-left').css("left")),$('.price-range-slider').width(),0,0],callback:function(params){

            $(".slide-selected").css("width",params.moveX+10.5-parseFloat($(".slide-selected").css("left")));
            
            var len3=parseFloat($(".slide-selected").css("left"))+(parseFloat($(".slide-selected").width())-parseFloat($(".tip").width()))/2;
            $(".tip").css("left",len3);
            
            //tip文字
            var moveX=params.moveX;
            var price=getPrice(params.moveX);
            if(57*9+34<=moveX){
                $(".tip-content").find("div:eq(0)").css("display","none");
                $(".tip-content").find("div:eq(1)").css("display","inline");
            }else{
                $(".tip-content").find("div:eq(0)").css("display","inline");
                $(".tip-content").find("div:eq(1)").css("display","none");
                $(".tip-content").find("span:eq(1)").text(price);
            }
            
        }});
});

///获取鼠标拖拽时移动到的价格区间
function getPrice(moveX){
    var price=2;
    if(0<moveX && moveX<34){
        var l=34/3;
        for(var i=1;i<=3;i++){
            if(l*(i-1)<=moveX && moveX<l*i){
                price=2+i;
                break;
            }
        }
    }else if( 34<=moveX && moveX<57*6+34){
        var l=57/5;
        for(var i=1;i<=30;i++){
            if(l*(i-1)+34<moveX && moveX<=l*i+34){
                price=5+i;
                break;
            }
        }
    }else if( 57*6+34<=moveX && moveX<57*7+34){
        var l=57/15;
        for(var i=1;i<=15;i++){
            if(l*(i-1)+57*6+34<moveX && moveX<=l*i+57*6+34){
                price=35+i;
                break;
            }
        }
    }else if( 57*7+34<=moveX && moveX<57*8+34){
        var l=57/20;
        for(var i=1;i<=20;i++){
            if(l*(i-1)+57*7+34<moveX && moveX<=l*i+57*7+34){
                price=50+i;
                break;
            }
        }
    }else if( 57*8+34<=moveX && moveX<57*9+34){
        var l=57/30;
        for(var i=1;i<=30;i++){
            if(l*(i-1)+57*8+34<moveX && moveX<=l*i+57*8+34){
                price=70+i;
                break;
            }
        }
    }
    
    return price;
}

///鼠标离开时事件
function getSelect(){
    alert($(".tip-content").text());
}
</script>

</head>

<body>
    <!--价格筛选条开始-->
    <div class="price-dd-choose">
        <div id="price-range" class="price-range">
            <div class="price-range-slider">
                <div style="left: 22.6667px;  438.833px;" class="bg-darkgrey"></div>
                <div title="紧凑型车可选区间4-60万" style="left: 22.6667px;  438.833px;" class="bg-darkgrey-hand"></div>
                <ul class="slider-ul">
                    <li class="slider-ul-first"><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                </ul>
            </div>
            <div class="slide-selected" style=" 296.4px; left: 78.2px;"></div>
            <i class="btn-price btn-left" style="left: 67.7px;"></i>
            <i class="btn-price btn-right" style="left: 364.1px;"></i>
            <div class="tip" style="left: 192.4px;">
              <div class="tip-content">
                  <div style="display:none;"><span>8</span>-<span>34</span>万</div>
                  <div style="display:none;">100万以上</div>
              </div>
              <span class="tip-top tip-arrow"></span>
            </div>
            <div class="price-range-text">
                <span class="number number-first">2万</span><span class="number">5万</span><span class="number">10万</span><span class="number">15万</span><span class="number">20万</span><span class="number">25万</span><span class="number">30万</span><span class="number">35万</span><span class="number">50万</span><span class="number">70万</span><span class="number">100万</span>
            </div>
            <span id="span1"></span>
        </div>
    </div>
    <!--价格筛选条结束-->
</body>
</html>

里面引用了jQuery的包jquery-1.9.1.min.js，自己去下载吧！