jQuery UI控制滑杆插件代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery UI控制滑杆插件代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>jQuery UI控制滑杆插件</title>
<link rel='stylesheet prefetch' href='css/font-awesome.min.css'>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

  <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>
  <script src='js/jquery_and_jqueryui.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

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}
);
}
}
);

CSS代码(style.css):

*,*: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;}

附件:下载该文件资源,减少时间成本(增值服务)