随笔- 354 文章- 0 评论- 3 阅读- 16万

有趣~

因为ba看中了一个网站特效，想要我把它弄下来，然后我就把它弄下来了~

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

<!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
    }
}