有趣~
因为ba看中了一个网站特效，想要我把它弄下来，然后我就把它弄下来了~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
ol,
ul {
list-style: none;
}
.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;
}
.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>
<style>
.price-dd-choose {
width: 610px;
height: 80px;
float: left
}
.price-range .btn-price,
.price-range .slider-ul li .icon-dian {
background: url(./pricerange_bg_24.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: -16px;
}
.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: 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
}
.price-range .tip {
top: -36px
}
.price-range .tip-content {
min-width: 30px;
line-height: 22px;
padding: 0 10px;
color: #666;
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: #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
}
</style>
<!--价格筛选条开始-->
<div class="price-dd-choose">
<div id="price-range" class="price-range">
<div class="price-range-slider">
<div class="bg-darkgrey"></div>
<div 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: 112px; left: 124px; display: none">
</div>
<i class="btn-price btn-left" style="left: 113px; display: none"></i>
<i class="btn-price btn-right" style="left: 226px; display: none"></i>
<div class="tip" style="left: 146px; display: none">
<div class="tip-content">15-25万</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>
</div>
</div>
<!--价格筛选条结束-->
<script src="jquery.min.js"></script>
<script src="slider.js"></script>
<script>
$("#price-range").slider({
unit: "万",
beyondMax: true,
beyondMin: true,
firstWidth: 34,
lastWidth: 23,
scale: [{
key: 2,
value: [1, 1, 1]
},
{
key: 5,
value: [1, 1, 1, 1, 1]
},
{
key: 10,
value: [1, 1, 1, 1, 1]
},
{
key: 15,
value: [1, 1, 1, 1, 1]
},
{
key: 20,
value: [1, 1, 1, 1, 1]
},
{
key: 25,
value: [1, 1, 1, 1, 1]
},
{
key: 30,
value: [1, 1, 1, 1, 1]
},
{
key: 35,
value: [3, 2, 5, 3, 2]
},
{
key: 50,
value: [5, 5, 5, 5]
},
{
key: 70,
value: [10, 10, 10]
},
{
key: 100,
value: 0.5
},
{
key: 110
}
]
}).on("changed", function (e, args) {
var min = args.value.leftValue,
max = args.value.rightValue;
if (min == 2) min = 1;
if (2188 > 110) {
if (max == 2188) max = 1;
} else {
if (max == 110) max = 1;
}
if (max == 10000) max = 1;
if (min + '_' + max == '2_2188') {
min = 0;
max = 0;
}
// location.href = '/car/' + min + '_' + max + '-0.0_0.0-0-0-0-0-0-0-0-0/';
});
// $("#price-range").data("slider").setRange({
// leftValue: 2,
// rightValue: 2188
// });
// $("#price-range").data("slider").setValue({
// leftValue: 45,
// rightValue: 10000,
// triggerEvent: false
// });
// $("#price-range").data("slider").setTipPrefix("全部级别");
// $("#price-range").data("slider").setRange({
// leftValue: 2,
// rightValue: 2188
// });
// $("#price-range").data("slider").setValue({
// leftValue: 45,
// rightValue: 10000,
// triggerEvent: false
// });
// $("#price-range").data("slider").setTipPrefix("全部级别");
</script>
</body>
</html>
and - js
$.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 () { // 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) { 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 } 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; if (this.options.showAllTip == true && this.noValidbar == false && Math.abs(value.rightX - value.rightValidX) <= 2 && Math.abs(value.leftX - value.leftValidX) <= 2) { content = "全部价格" } else if (this.options.showAllTip == true && 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 } }
and -img
本来是打算放github的外网阻碍了~~
Put the favorites in the favorites and empty the favorites.
浙公网安备 33010602011771号