今天要做个滑动条
如图：
用jqueryUI实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的滑动条插件</title> <link rel="stylesheet" href="js/jQueryUi/jquery-ui.min.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jQueryUi/jquery-ui.min.js"></script> <style> .slidebox { position: relative; padding-top: 30px; width: 300px; margin: 15px; } .slidebox .s_span { position:absolute; top:0; font-size:12px; background:#3EB194; display:inline-block; border-radius: 2px; padding: 1px 5px; } .slidebox .s_l { left: 5px; background: #3EB194; color: #fff; } .slidebox .s_r { right: 5px; background: #E7EBEE; } .slidebox .s_span:after{position: absolute;left:50%;margin-left:-4px;bottom:-2px;content:" ";display:block;transform:rotate(-45deg); border-top:solid 8px #fff;border-left:solid 8px #3EB194;height:0px;width:0px;z-index: -1} .slidebox .s_r:after{border-left:solid 8px #E7EBEE;} #slider { float: left; clear: left; width: 300px; } #slider .ui-slider-range { background: #3EB194; } #slider .ui-slider-handle { border-color: #3EB194;cursor:pointer; } </style> </head> <body> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> 简单的滑动条插件 </p> <div id="slidebox" class="slidebox"> <span class="s_span s_l "></span> <span class="s_span s_r"></span> <div id="slider"></div> <input type="hidden" id="input_slide" name="" value=""> </div> <script> var o = { 'count':100, 'left':80, 'right':20 }; jQuery(function($) { function refreshSwatch() { var left = $( "#slider" ).slider( "value" ); var right = o.count-left; $("#slidebox .s_l").html( left ); $("#slidebox .s_r").html( right ); $("#input_slide").val( o.count +'_'+ left +'_'+ right ); console.log($("#input_slide").val()); } $( "#slider" ).slider({ orientation: "horizontal", range: "min", max: o.count, value: o.left, slide: refreshSwatch, change: refreshSwatch }); $( "#slider" ).slider( "value", o.left ); }); </script> </body> </html>
源代码下载地址：
链接：http://pan.baidu.com/s/1gd8fW7T 密码：gshg