简版 - 区间选择
hml
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <!-- saved from url=(0047)https://www.jq22.com/demo/jQuerySx201711022347/ --> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>价格滑动效果</title> <link rel="stylesheet" href="./价格滑动效果_files/style.css"> </head> <body style="padding-left: 100px;"> <!--价格筛选条开始--> <div class="price-dd-choose"> <div id="price-range" class="price-range"> <div class="price-range-slider"> <div class="bg-darkgrey" style="left: 0px; width: 570px;"></div> <div class="bg-darkgrey-hand" style="left: 0px; width: 570px;"></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="left: 10px; width: 570px;"></div> <i class="btn-price btn-left" style="left: 3px;"></i> <i class="btn-price btn-right" style="left: 573px;"></i> <div class="tip" style="left: 243px;"> <div class="tip-content">不限</div> <span class="tip-top tip-arrow"></span> </div> <div class="price-range-text"> <span class="number number-first">0万</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> </div> </div> <!--价格筛选条结束--> <script src="./价格滑动效果_files/jquery-1.10.2.js.下载"></script> <script src="./价格滑动效果_files/jquery.min.js.下载"></script> <script src="./价格滑动效果_files/slider.js"></script> <script> var temp = 0; $(function () { $("#price-range").slider({ unit: "万", beyondMax: true, beyondMin: true, firstWidth: 34, lastWidth: 23, scale: [{ key: 0, value: [1] }, { key: 5, value: [1] }, { key: 10, value: [1] }, { key: 15, value: [1] }, { key: 20, value: [1] }, { key: 25, value: [1] }, { key: 30, value: [1] }, { key: 35, value: [1] }, { key: 50, value: [1] }, { key: 70, value: [1] }, { key: 100, value: [1] }, { key: 110, value: [1] } ] }) .on("changed", function (e, args) { var min = args.value.leftValue, max = args.value.rightValue; console.log('eeeeeee', e) console.log(min, max); }); $("#price-range").data("slider").setRange({ leftValue: 30, rightValue: 70 }); }); </script> </body> </html>
css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.price-dd-choose { width: 610px; height: 80px; float: left; } .price-range { height: 40px; margin-top: 40px; position: relative; } .price-range .price-range-slider { width: 570px; height: 6px; overflow: hidden; position: absolute; top: 25px; left: 10px; background-color: #f8f8f8; } .price-range .bg-darkgrey, .price-range .bg-darkgrey-hand { left: 0; width: 570px; position: absolute; top: 0; height: 5px; overflow: hidden; } .price-range .bg-darkgrey { background-color: #ccd3e4; } .price-range .bg-darkgrey-hand { cursor: pointer; z-index: 5; } .price-range .slider-ul { width: 570px; height: 5px; padding: 0; overflow: hidden; cursor: pointer; position: absolute; top: 0; margin: 0; } .price-range .slider-ul li { width: 57px; height: 10px; float: left; position: relative; } .price-range .slider-ul li.slider-ul-first { width: 34px; } .price-range .slider-ul li .icon-dian { width: 3px; height: 5px; line-height: 0; overflow: hidden; position: absolute; right: -4px; _top: 1px; background: #fff; } .price-range .slide-selected { height: 5px; line-height: 0; overflow: hidden; background-color: #328cff; position: absolute; top: 25px; left: 10px; z-index: 6; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; cursor: pointer; } .price-range .btn-price { display: inline-block; width: 14px; height: 14px; position: absolute; top: 21px; z-index: 10; cursor: pointer; background: #328cff; border-radius: 50%; } .price-range .tip { min-width: 100px; max-width: 100px; position: absolute; z-index: 100; padding: 2px; background: url(./shadow_bg.jpg) repeat; font-size: 12px; float: left; top: 40px; } .price-range .tip .tip-content { min-width: 30px; line-height: 22px; padding: 0 10px; color: #666; overflow: hidden; text-align: center; white-space: nowrap; font-size: 14px; position: relative; z-index: 1; } .price-range .tip .tip-arrow { display: inline-block; overflow: hidden; position: absolute; z-index: 2; background: url(./layer_arrow24.png) no-repeat; } .price-range .tip .tip-top { width: 15px; height: 11px; top: -8px; left: 38%; background-position: 0 -26px; } .price-range .price-range-text { height: 20px; color: #999; } .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; }
js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
(function () { $.fn.slider = function (option) { return this.each(function () { var $this = $(this), data = $(this).data("slider"); var options = $.extend({}, $.fn.slider.defaults, $this.data(), option); if (data == null) data = new Slider($this, options); $(this).data("slider", data); if (typeof option === "string") { data[option]() } }) }; function Slider($elem, option) { this.$elem = $elem; this.options = option; this.$leftButton = $(".btn-left", $elem); this.$rightButton = $(".btn-right", $elem); this.$selectedbar = $(".slide-selected", $elem); this.$tip = $(".tip", $elem); this.$tipContent = $(".tip-content", $elem); this.$fullbar = $(".price-range-slider", $elem); this.$validbar = $(".bg-darkgrey,.bg-darkgrey-hand", $elem); this.$lowTip = $(".low01", $elem); this.$highTip = $(".high01", $elem); this.noValidbar = false; if (this.$validbar.size() == 0) { this.$validbar = this.$fullbar; this.noValidbar = true } this._fullbarWidth = this.$fullbar.width(); this._$activeButton = null; this._allowDrag = false; this._buttonWidth = this.$leftButton.width(); this._unit = this.options.unit; this._beyondMax = this.options.beyondMax; this._beyondMin = this.options.beyondMin; this._minusLeft = null; this._scale = this.options.scale; this._max = this._scale == null ? this.options.max : this._scale[this._scale.length - 1].key; this._min = this._scale == null ? this.options.min : this._scale[0].key; this._lastValue = null; this._moveValue = null; this._mouseDownPageX = null; this._canTouch = function () { try { document.createEvent("TouchEvent"); return true } catch (e) { return false } }(); this._tempValue = []; this._rangeValue = null; this._init() } Slider.prototype = { _initShow: function () { this.$leftButton.show(); this.$rightButton.show(); this.$tip.show(); this.$validbar.show(); this.$selectedbar.show() }, _init: function () { jQuery.browser = {}; (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); if ($.browser.msie == true && $.browser.version < 9) { $("*", this.$elem).prop("unselectable", true) } this.$leftButton.add(this.$rightButton).on("mousedown.slider", $.proxy(this._mousedownHandler, this)); this.$fullbar.add(this.$selectedbar).on("click.slider", $.proxy(this._validbarClickHandler, this)); $(document.body).on("mouseup.slider", $.proxy(this._mouseupHandler, this)); $(document.body).on("mousemove.slider", $.proxy(this._mousemoveHandler, this)); if (this._canTouch == true) { this.$leftButton.add(this.$rightButton).on("touchstart.slider", $.proxy(this._mousedownHandler, this)); $(document.body).on("touchend.slider", $.proxy(this._mouseupHandler, this)); $(document.body).on("touchmove.slider", $.proxy(this._mousemoveHandler, this)) } $("a", this.$elem).click(function () { return false }); this._initShow(); this._initScale() }, _initScale: function () { for (var i = 0; i < this._scale.length - 1; i++) { var scale = this._scale[i]; var leftValueArray = []; leftValueArray.push(scale.key); for (var j = 0; j < scale.value.length - 1; j++) { leftValueArray.push(leftValueArray[leftValueArray.length - 1] + scale.value[j]) } scale.leftValue = leftValueArray } }, _setLowHightTip: function () { var validBarLeft = this.$validbar.position().left + this.$fullbar.position().left; var validBarWidth = this.$validbar.width(); var leftButtonLeft = this.$leftButton.position().left; var rightButtonLeft = this.$rightButton.position().left; if (leftButtonLeft < validBarLeft - this._buttonWidth / 2 - 1) { this.$lowTip.show() } else { this.$lowTip.hide() } if (rightButtonLeft > validBarLeft + validBarWidth - this._buttonWidth / 2 + 1) { this.$highTip.show() } else { this.$highTip.hide() } if (rightButtonLeft < validBarLeft - this._buttonWidth / 2 || leftButtonLeft > validBarLeft + validBarWidth - this._buttonWidth / 2) { this.$lowTip.show(); this.$highTip.show(); this.$lowTip.find("i").addClass("icon-dian-blue"); this.$highTip.find("i").addClass("icon-dian-blue") } else { this.$lowTip.find("i").removeClass("icon-dian-blue"); this.$highTip.find("i").removeClass("icon-dian-blue") } }, setTipPrefix: function (prefix) { $(".bg-darkgrey-hand", this.$elem).prop("title", prefix + "可选区间" + this._rangeValue.leftValue + "-" + this._rangeValue.rightValue + this._unit) }, _validbarClickHandler: function (e) { if ($(e.target).hasClass("low01") || $(e.target).hasClass("high01")) { return } var clickX = e.pageX - this.$fullbar.offset().left; var value = this.getValue(); var leftX = value.leftX; var rightX = value.rightX; var newLeft = clickX; newLeft = this._getFixedPosition(newLeft).leftX; newLeft = newLeft - this._buttonWidth / 2; var newLeftButtonLeft = null; var newRightButtonLeft = null; var animateButton = null; if (clickX <= leftX + (rightX - leftX) / 2) { animateButton = this.$leftButton; newLeftButtonLeft = newLeft; newRightButtonLeft = this.$rightButton.position().left } else { animateButton = this.$rightButton; newRightButtonLeft = newLeft; newLeftButtonLeft = this.$leftButton.position().left } var newWidth = newRightButtonLeft - newLeftButtonLeft; if (animateButton == this.$leftButton && this.$rightButton.position().left > this._fullbarWidth - 15 && newLeft + this.$fullbar.position().left > this._fullbarWidth - 15) { return } animateButton.css({ left: newLeft + this.$fullbar.position().left }); this._setLowHightTip(); this._setTipContent(); this._setTipPosition(); this._setSelectedbar(); this._fireChangeEvent() }, _mousedownHandler: function (e) { var pageX = null; if (e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0]) { pageX = e.originalEvent.touches[0].pageX } else { pageX = e.pageX } this._allowDrag = true; this._$activeButton = $(e.target); if (this._$activeButton[0] == this.$leftButton[0]) { this.$leftButton.css("zIndex", 20); this.$rightButton.css("zIndex", 10) } else { this.$leftButton.css("zIndex", 10); this.$rightButton.css("zIndex", 20) } this._minusLeft = pageX - this._$activeButton.position().left; if (this.$leftButton.position().left == this.$rightButton.position().left) { this._mouseDownPageX = pageX } else { this._mouseDownPageX == null } return false }, _mousemoveHandler: function (e) { if (this._allowDrag) { // console.log('_mousemoveHandler e', e) var pageX = null; if (e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0]) { pageX = e.originalEvent.touches[0].pageX } else { pageX = e.pageX } if (this._mouseDownPageX != null) { var moveRight = pageX > this._mouseDownPageX; if (moveRight == true) { this._$activeButton = this.$rightButton; this.$leftButton.css("zIndex", 10); this.$rightButton.css("zIndex", 20) } else { this._$activeButton = this.$leftButton; this.$leftButton.css("zIndex", 20); this.$rightButton.css("zIndex", 10) } this._mouseDownPageX = null } var newLeft = pageX - this._minusLeft; if (this._$activeButton[0] == this.$leftButton[0]) { if (newLeft > this.$rightButton.position().left) { newLeft = this.$rightButton.position().left } } else { if (newLeft < this.$leftButton.position().left) { newLeft = this.$leftButton.position().left } } var validBarLeft = this.$validbar.position().left + this.$fullbar.position().left; var validBarWidth = this.$validbar.width(); newLeft = newLeft - this.$fullbar.position().left + this._buttonWidth / 2; newLeft = this._getFixedPosition(newLeft).leftX; newLeft = newLeft + this.$fullbar.position().left - this._buttonWidth / 2; if (this._$activeButton[0] == this.$leftButton[0] && this.$rightButton.position().left > this._fullbarWidth - 15 && newLeft > this._fullbarWidth - 15) { return } // start - left < right if (this._$activeButton[0] == this.$leftButton[0]) { var tempLeft = this.$rightButton.position().left - 55 if (newLeft > tempLeft) { return } } else if (this._$activeButton[0] == this.$rightButton[0]) { var tempLeft = this.$leftButton.position().left + 55 if (newLeft < tempLeft) { return } } // end this._$activeButton.css("left", newLeft); this._setLowHightTip(); this._setSelectedbar(); this._setTipContent(); this._setTipPosition() } }, _fireChangeEvent: function () { if (this._lastValue == null || this._lastValue.leftValue != this._moveValue.leftValue || this._lastValue.rightValue != this._moveValue.rightValue) { var args = { "value": this._moveValue }; this.$elem.trigger('changed', args) } this._lastValue = this._moveValue }, _mouseupHandler: function () { if (this._allowDrag) { this._allowDrag = false; this._$activeButton = null; this._fireChangeEvent() } }, setValue: function (option) { var pointX = this._getPointX(option); this.$leftButton.css("left", pointX.leftX + this.$fullbar.position().left - this._buttonWidth / 2); this.$rightButton.css("left", pointX.rightX + this.$fullbar.position().left - this._buttonWidth / 2); this._setSelectedbar(); this._setTipContent(); this._setTipPosition(); if (!(option.triggerEvent === false)) this._fireChangeEvent(); this._lastValue = this._moveValue; this._setLowHightTip() }, setRange: function (option) { var pointX = this._getPointX(option); // this.$validbar.css({ // left: pointX.leftX, // width: pointX.rightX - pointX.leftX // }); this.$leftButton.css("left", pointX.leftX + this.$fullbar.position().left - this._buttonWidth / 2); this.$rightButton.css("left", pointX.rightX + this.$fullbar.position().left - this._buttonWidth / 2); this._setSelectedbar(); this._setTipContent(); this._setTipPosition(); this._lastValue = this._moveValue; this._rangeValue = this._lastValue; this._setLowHightTip() }, _getPointX: function (option) { var miniScale = this._getMiniScale(); var leftX = null; var rightX = null; for (var i = miniScale.length - 1; i >= 0; i--) { if (option.leftValue >= miniScale[i].leftValue) { leftX = miniScale[i].leftX; this._tempValue.push([miniScale[i].leftValue, option.leftValue]); break } } for (var i = miniScale.length - 1; i >= 0; i--) { var rawScaleLeftValue = miniScale[i].leftValue; var scaleLeftValue = this._getValueByTempValue(rawScaleLeftValue); if (option.rightValue >= scaleLeftValue) { if (miniScale[i + 1] && option.rightValue > scaleLeftValue) { rightX = miniScale[i + 1].leftX; this._tempValue.push([miniScale[i + 1].leftValue, option.rightValue]) } else { rightX = miniScale[i].leftX; this._tempValue.push([rawScaleLeftValue, option.rightValue]) } break } } if (option.rightValue == option.leftValue) { leftX = rightX } return { leftX: leftX, rightX: rightX } }, _getFixedPosition: function (leftX) { if (leftX < 0) leftX = 0; var miniScale = this._getMiniScale(); if (leftX >= miniScale[miniScale.length - 1].leftX2 - 1) { return { leftX: this._fullbarWidth, leftValue: miniScale[miniScale.length - 1].leftValue } } else if (leftX >= miniScale[miniScale.length - 2].leftX) { return { leftX: miniScale[miniScale.length - 2].leftX, leftValue: miniScale[miniScale.length - 2].leftValue } } for (var i = miniScale.length - 2; i >= 0; i--) { if (leftX >= miniScale[i].leftX2 - 1) { return { leftX: miniScale[i].leftX, leftValue: miniScale[i].leftValue } } } }, _getMiniScale: function () { var miniScale = []; var commonSingleWidth = (this._fullbarWidth - this.options.firstWidth - this.options.lastWidth) / (this._scale.length - 3); for (var i = 0; i < this._scale.length - 1; i++) { var singleWidth = commonSingleWidth; var scale = this._scale[i]; var leftX = null; if (i == 0) { singleWidth = this.options.firstWidth } else if (i == this._scale.length - 2) { singleWidth = this.options.lastWidth } if (i == 0) { leftX = 0 } else { leftX = this.options.firstWidth + (i - 1) * commonSingleWidth } if (i < this._scale.length - 2) { for (var j = 0; j < scale.value.length; j++) { var s = { leftX: leftX + j * singleWidth / scale.value.length, leftValue: scale.leftValue[j] }; if (j == 0) { s.isBigPoint = true } miniScale.push(s) } } else { miniScale.push({ leftX: leftX, leftValue: scale.key, isBigPoint: true }); miniScale.push({ leftX: this._fullbarWidth, leftX2: leftX + singleWidth * scale.value, leftValue: this._scale[i + 1].key, isBigPoint: true }) } } for (var i = miniScale.length - 2; i >= 0; i--) { var mScale = miniScale[i]; if (i == 0) { mScale.leftX2 = 0; break } if (mScale.isBigPoint) { mScale.leftX2 = mScale.leftX - (mScale.leftX - miniScale[i - 1].leftX) * 0.6 } else if (miniScale[i - 1].isBigPoint) { mScale.leftX2 = mScale.leftX - (mScale.leftX - miniScale[i - 1].leftX) * 0.4 } else { mScale.leftX2 = mScale.leftX - (mScale.leftX - miniScale[i - 1].leftX) * 0.5 } } return miniScale }, _getValueByTempValue: function (value) { if (this._tempValue == null) return value; for (i = 0; i < this._tempValue.length; i++) { if (this._tempValue[i][0] == value) { return this._tempValue[i][1] } } return value }, _getPointLeft: function (buttonLeft) { return Math.abs(buttonLeft + this._buttonWidth / 2 - this.$fullbar.position().left) }, getValue: function () { var leftX = this._getPointLeft(this.$leftButton.position().left); var leftPosition = this._getFixedPosition(leftX); var leftValue = this._getValueByTempValue(leftPosition.leftValue); var rightX = this._getPointLeft(this.$rightButton.position().left); var rightPosition = this._getFixedPosition(rightX); var rightValue = this._getValueByTempValue(rightPosition.leftValue); var leftValidX = this.$validbar.position().left; var rightValidX = leftValidX + this.$validbar.width(); return { leftValue: leftValue, rightValue: rightValue, leftX: leftX, rightX: rightX, leftValidX: leftValidX, rightValidX: rightValidX } }, _setSelectedbar: function () { this.$selectedbar.css({ left: this.$leftButton.position().left + this.$leftButton.width() / 2, width: this.$rightButton.position().left - this.$leftButton.position().left }) }, _setTipPosition: function () { var leftButtonLeft = this.$leftButton.position().left; var rightButtonLeft = this.$rightButton.position().left; var tipWidth = this.$tip.outerWidth(); this.$tip.css("left", leftButtonLeft + (rightButtonLeft - leftButtonLeft) / 2 - tipWidth / 2 + this._buttonWidth / 2) }, _setTipContent: function () { var value = this.getValue(); var content = ""; var min = null; var max = null; var leftValue = value.leftValue var rightValue = value.rightValue === 110 ? 10000 : value.rightValue if (leftValue === 0 && rightValue === 110) { content = "不限" } else { content = leftValue + '-' + rightValue + '万' } // if (this.noValidbar == false && Math.abs(value.rightX - value.rightValidX) <= 2 && Math.abs(value.leftX - value.leftValidX) <= 2) { // content = "不限" // } else if (this._beyondMax == true && value.rightValue == this._getValueByTempValue(this._max) && this._beyondMin == true && value.leftValue == this._getValueByTempValue(this._min)) { // content = "不限" // } else if (value.leftValue == this._getValueByTempValue(this._min) && value.rightValue == this._getValueByTempValue(this._max)) { // content = value.leftValue + "-" + this._scale[this._scale.length - 2].key + this._unit + "以上" // } else if (this._beyondMax == true && value.rightValue == this._getValueByTempValue(this._max)) { // if (value.leftValue == value.rightValue) { // content = this._scale[this._scale.length - 2].key + this._unit + "以上" // } else { // content = value.leftValue + this._unit + "以上" // } // } else if (this._beyondMin == true && value.leftValue == this._getValueByTempValue(this._min)) { // content = value.rightValue + this._unit + "以下" // } else if (value.leftValue == value.rightValue) { // content = value.leftValue + this._unit // } else { // content = value.leftValue + "-" + value.rightValue + this._unit // } this.$tipContent.html(content); this._moveValue = value } } })();
img
Put the favorites in the favorites and empty the favorites.