https://16superpoteri.com/js/jquery.progress.js

1/*
2 * @Author: [email protected] 
3 * @Date: 2018-12-13 14:45:54 
4 * @Last Modified by: CoderQiQin
5 * @Last Modified time: 2018-12-13 14:48:11
6 */
7if (typeof jQuery === 'undefined') {
8  throw new Error('请先引用jquery')
9}
10
11(function($){
12  function Progress(el, options) {
13    this.el = el
14    this.options = options
15    this._init()
16  }
17  
18  Progress.prototype._init = function() {
19    var docHeight = $('body').height() // 文档高度
20    var sercHeight = $(window).height() // 屏幕高度
21    var resHeight = docHeight - sercHeight
22
23    var config = this.options
24
25    var proConfig = {
26      position: 'fixed',
27      top: 47,
28      left: 0,
29      width: '100%',
30      height: '2px',
31      backgroundColor: '#eee',
32      zIndex: 9999
33    }
34    var innerConfig = {
35      width: 0,
36      backgroundColor: '#50bcb6',
37      height: '100%',
38      transitionProperty: 'width',
39      transitionDuration: '.3s',
40      transitionTimingFunction: 'linear'
41    }
42
43    var proMap = ['size', 'position', 'wapperBg', ]
44    var innerMap = ['innerBg', 'duration', 'effect']
45    var setMap = proMap.concat(innerMap)
46
47    for(let key in config) {
48      if(!setMap.includes(key)) delete config[key]
49      switch (key) {
50        case 'size':
51          proConfig.height = config.size
52          break;
53        case 'position':
54          if(config.position === 'bottom') {
55            delete proConfig.top
56            proConfig['bottom'] = 0
57          }
58          break;
59        case 'wapperBg':
60          proConfig.backgroundColor = config.wapperBg
61          break;
62        case 'innerBg':
63          innerConfig.backgroundColor = config.innerBg
64          break;
65        case 'duration':
66          innerConfig.transitionDuration = config.duration
67          break;
68        case 'effect':
69          innerConfig.transitionTimingFunction = config.effect
70          break;
71        default:
72          break;
73      }
74    }
75
76    this.el.empty().css(proConfig)
77    $('<div class="inner"></div>').appendTo(this.el).css(innerConfig)
78    
79    $(window).scroll(function(e) {
80      window.requestAnimationFrame(function(){
81        var docHeight = $('body').height() // 文档高度
82        var sercHeight = $(window).height() // 屏幕高度
83        var resHeight = docHeight - sercHeight
84        var width = Math.max(0, Math.min(1, $(window).scrollTop() / resHeight))
85        $('.inner').show().css('width', width * 100 +'%')
86      })
87    })
88  }
89
90  $.fn.progress = function(options) {
91    this.each(function(el) {
92      new Progress($(this), options || null)
93    })
94    return this
95  }
96  
97})(jQuery)