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_jqueryu足毂忍珩i.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、查看效果。这里的上下加减，需要自己设置文字图标。
