案例

├── README.md ├── index.html ├── jquery-3.3.1.js └── progress.plugin.js /README.md: -------------------------------------------------------------------------------- 1 | # easy-progress 2 | 简易进度条基于jquery 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 案例 7 | 8 | 9 | 52 | 53 | 54 | 55 | 61 | 62 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /progress.plugin.js: -------------------------------------------------------------------------------- 1 | 2 | ;(function($){ 3 | 4 | $.extend({ 5 | progress : function( opt ){ 6 | 7 | var def = { 8 | step : 3, 9 | line_w : 300, 10 | } 11 | 12 | var setting = $.extend({},def,opt); 13 | 14 | function Progress(){ 15 | 16 | this.index_w = setting.line_w / (setting.step - 1); 17 | this.index = 0; 18 | this.init(); 19 | } 20 | 21 | Progress.prototype = { 22 | constructor : Progress, 23 | init : function(){ 24 | this.render(); 25 | this.changeLength(); 26 | }, 27 | 28 | render : function(){ 29 | $(`

30 |

31 |

32 | 33 | 34 |

`).appendTo(document.body); 35 | 36 | $(".line").css({ 37 | width : setting.line_w, 38 | }); 39 | for(var i = 1;i <= setting.step;i++){ 40 | $(`${i}`).css({ 41 | left : (i - 1) * this.index_w - 10, 42 | }).appendTo(".warp"); 43 | } 44 | }, 45 | 46 | changeLength : function(){ 47 | var _this = this; 48 | $(".next").click(function(){ 49 | $(this).next().prop("disabled",false); 50 | _this.index += 1; 51 | if(_this.index >= setting.step - 1){ 52 | _this.index = setting.step - 1; 53 | $(this).prop("disabled",true); 54 | } 55 | $(this).parent().find(".step").stop().animate({ 56 | width : _this.index * _this.index_w, 57 | },1000); 58 | }); 59 | $(".prev").click(function(){ 60 | 61 | $(this).prev().prop("disabled",false); 62 | 63 | _this.index -= 1; 64 | if(_this.index <= 0 ){ 65 | _this.index = 0; 66 | $(this).prop("disabled",true); 67 | } 68 | 69 | $(this).parent().find(".step").stop().animate({ 70 | width : _this.index * _this.index_w, 71 | },1000); 72 | }); 73 | } 74 | } 75 | new Progress(); 76 | } 77 | }); 78 | //extend是方法, 是合并对象的 79 | })(jQuery) 80 | --------------------------------------------------------------------------------