滑动进度条小插件 发表于 2016-11-21 功能:1.可对进度条进行设置,2.可滑动进度条,4.可设置进度条名5.可修改其颜色. 插件效果图如下: Html Code:12345678910111213141516171819202122<!doctype html><html><head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script src="bar3.js"></script> <link rel="stylesheet" type="text/css" href="bar.css"></head><body> <div class="dis"></div> <div id="dis2"></div></body><script type="text/javascript"> $('.dis').createBar(); $('#dis2').createBar({ color: '#ff5f71', value: 20, name: '男生' }); console.log($('.dis').GetValue());</script></html> Css Code:123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127.progress-box{ width: 500px; padding: 15px;}.progress-box .progress-bar-box{ height: 8px; overflow: inherit; border-radius: 5px; background: #dddee0; width: 465px; margin-left: 0px;}.progress-box .progress-bar-box .bar-scroll{}.progress-box .progress-bar-box .bar-scroll-box{ background-color: #009ddd; position: relative; border-radius: 5px; width: 20%; height: 8px;}.progress-box .progress-bar-box .bar-scroll-box .bar-mark{ display: inline-block; width: 20px; height: 20px; background: #fff; position: absolute; top: -6px; right: -10px; border-radius: 50%; border: 2px solid #ccc; box-shadow: 0px 1px 10px #dadada;}.progress-box .progress-bar-box .bar-scroll-box .bar-info{ position: absolute; z-index: 1070; display: block; font-size: 12px; line-height: 1.4; visibility: visible; filter: alpha(opacity=0); padding: 5px 5px; margin-top: -3px; color: #fff; right: -39px; top: -37px; min-width: 75px;}.progress-box .progress-bar-box .bar-scroll-box .bar-info .info-arrow{ position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #009ddd;}.progress-box .progress-bar-box .bar-scroll-box .bar-info .info-inner{ max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; border-radius: 4px; background: #009ddd;}.content-box .intro-box .intro-form-box .form-horizontal .sex-box{ margin-bottom: 10px;}.sex-box .progress{ height: 8px; overflow: inherit; border-radius: 5px; background: #dddee0; width: 465px; margin-left: 0px;}.sex-box .progress-bar{ position: relative; border-radius: 5px;}.sex-box .progress-bar-info{ background-color: #009ddd;}.sex-box .progress-bar-danger{ background-color: #ff5f71;}.sex-box .progress-flag{ display: inline-block; width: 20px; height: 20px; background: #fff; position: absolute; top: -6px; right: -10px; border-radius: 50%; border: 2px solid #ccc; box-shadow: 0px 1px 10px #dadada;}.sex-box .boy-box .tooltip.top{ color: #fff; right: -32px; top: -37px;}.sex-box .boy-box .tooltip.top .tooltip-arrow{ border-top-color: #009ddd;}.sex-box .boy-box .tooltip.top .tooltip-inner{ background: #009ddd;}.sex-box .girl-box .tooltip.top{ color: #fff; right: -32px; top: -37px;}.sex-box .girl-box .tooltip.top .tooltip-arrow{ border-top-color: #ff5f71;}.sex-box .girl-box .tooltip.top .tooltip-inner{ background: #ff5f71;} Js Code:1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889/* createBar:创建进度条 defaluValue:进度条默认参数 color:进度条颜色,标签颜色 width:进度条进度 name:标签名称 SetColor:设置颜色 GetValue:获取进度 SetValue:设置进度 ScrollBarEvent: 滑动进度条*/(function ($) { $.fn.extend({ createBar: function(options) { var defaultValue = { //默认参数 color: '#009ddd', value: 0, name: '女生' }; if (options != undefined) { //有参数 $.each(options, function(n, val) { if (n != null) { defaultValue[n] = val; } }); } var $this = $(this); $this.append('<div style="margin-top: 50px; margin-left: 50px;">' +'<div class="progress-box">' +'<div class="progress-bar-box">' +'<div class="bar-scroll-box" data-width="'+ defaultValue['value'] +'">' +'<span class="bar-mark"></span>' +'<div class="bar-info">' +'<div class="info-arrow"></div>' +'<div class="info-inner">' +''+ defaultValue['name'] +':<span>'+defaultValue['value'] +'</span>%' +'</div>' +'</div>' +'</div>' +'</div>' +'</div>' +'<span class="pro-info"></span>' +'</div>'); this.SetColor($this, defaultValue['color']); this.SetValue($this, defaultValue['value']); this.ScrollBarEvent($this); }, SetColor: function($box, color) { $box.find('.bar-scroll-box').css('background-color', color); $box.find('.info-inner').css('background-color', color); $box.find('.info-arrow').css('border-top-color', color); }, GetValue: function($box) { var $this = $(this); this.currentX = $this.find(".bar-scroll-box").data('width'); return this.currentX; }, SetValue: function ($box, index) { /*设置进度条的的宽度*/ var $bar = $box.find('.bar-scroll-box'); if (index === undefined) { //没有参数 index = $bar.data('width'); } $bar.css('width', index +'%'); $bar.attr('data-width', index); $bar.find('.info-inner').find('span').html(index); }, ScrollBarEvent: function($box) { var thisVal = this; var $par = $box.find('.progress-box'); var barLeft = $par.offset().left; //进度条的开始点位置; var barWidth = $par.find('.progress-bar-box').width(); //进度条宽度; var scale = barWidth / 100; var barRight = barLeft + barWidth; //进度条的结束点位置; $box.find(".bar-mark").on('mousedown', function () { $box.find('.progress-box').on('mousemove', function (event) { var changeX = event.clientX; //每次移动1px; var currentValue = event.clientX - barLeft; //当前移动的位置 if (changeX >= barLeft && changeX <= barRight){ currentValue = currentValue /scale; thisVal.SetValue($box, Math.round(currentValue)); } }); }); $(document.body).mouseup(function () { $box.find('.progress-box').off('mousemove'); }); } });}(jQuery));