仿汽车之家搜索页价格签区间(鼠标拖拽同时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; width: 438.833px;" class="bg-darkgrey"></div> <div title="紧凑型车可选区间4-60万" style="left: 22.6667px; width: 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="width: 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,自己去下载吧!