html5+css3+jQuery UI控制滑杆插件
1、新建html文档。
2、书写hmtl代码。
<div class="wrapper">
<div class="map-slider">
<div class="buttons">
<span class="fa fa-plus"></span>
<div class="drag-line">
<div class="line"></div>
<div class="draggable-button"></div>
</div>
<div class="draggable-buton"></div>
<span class="fa fa-minus"></span>
</div>
</div>
</div>
3、书写css代码。
<style>
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { background: #ff9770; font-size: 16px; }
.wrapper { width: 52px; margin: 10px auto; }
.map-icon { width: 52px; height: 52px; background: #f7f7f7; border-radius: 3px; -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); margin-bottom: 15px; text-align: center; color: #adccce; padding: 14px 0; }
.map-icon span { font-size: 1.3em; }
.map-slider { width: 52px; height: 330px; background: #f7f7f7; border-radius: 3px; text-align: center; -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2); position: relative; color: #866a62; }
.map-slider::before { content: ""; width: 100%; height: 1px; background: #dedede; position: absolute; left: 0; margin-top: 50px; -webkit-box-shadow: 0 1px 0 0 white, 0 230px 0 0 #dedede, 0 229px 0 0 white; box-shadow: 0 1px 0 0 white, 0 230px 0 0 #dedede, 0 229px 0 0 white; }
.map-slider .fa-plus { display: block; padding-top: 16px; height: 50px; cursor: pointer; }
.map-slider .fa-minus { display: block; height: 50px; padding-top: 12px; cursor: pointer; }
.map-slider .drag-line { width: 8px; height: 182px; background: #ff9770; border-radius: 8px; margin: 25px auto; position: relative; }
.map-slider .line { width: 8px; height: 182px; background: #adccce; border-radius: 8px; margin: 25px auto; position: absolute; margin-top: 0px; margin-bottom: 0px; padding-top: 10px; clip: rect(0px, 8px, 183px, 0px); }
.map-slider .draggable-button { width: 29px; height: 29px; background: #f7f7f7; border-radius: 50%; position: absolute; -webkit-box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.2); margin-left: -9px; cursor: pointer; }
</style>
4、书写引用js代码。
<script src='js/jquery_and_jqueryui.js'></script>
<script>
var lineHeight = ($('.drag-line').height())-15;
$('.draggable-button').draggable({
axis: 'y',
containment: 'parent'
});
$('.draggable-button').on('drag', function(){
var position = $('.draggable-button').position();
var marginTop = position.top;
$('.line').css({
'clip': 'rect('+ marginTop +'px,8px, 183px,0px)'
});
});
$('.fa-minus').on('click', function(){
var position = $('.draggable-button').position();
var marginTop = position.top;
$('.line').css({
'clip': 'rect('+ (marginTop+14) +'px,8px, 183px,0px)'
});
if( marginTop < lineHeight){
$('.draggable-button').css({
'top': marginTop + 14
});
}
});
$('.fa-plus').on('click', function(){
var position = $('.draggable-button').position();
var marginTop = position.top;
$('.line').css({
'clip': 'rect('+ (marginTop-14) +'px,8px, 183px,0px)'
});
if( marginTop > 0){
$('.draggable-button').css({
'top': marginTop - 14
});
}
});
</script>
5、网页整体代码
6、查看效果。这里的上下加减，需要自己设置文字图标。
