1
我用jQuery 1.12.2和animate.css成功地填充了一個進度條。現在,我試圖只在我向下滾動到當前加載後立即加載進度條。當它在頁面底部的某個地方被加載時,擁有這個真棒功能有什麼意義?滾動到它後加載一個Javascript進度條
我創建了一個JSFiddle here。我知道JavaScript有點雜亂,可以用更清晰的方式編寫,但請原諒我,因爲我是JS的新手,並試圖首先完成這項工作。誰能幫忙?
$('#myid').goalProgress({
goalAmount: 100,
currentAmount: 75,
textBefore: 'myid ',
textAfter: ''
});
});
goalProgress是一個完全不同的類:
!function($){
$.fn.extend({
goalProgress: function(options) {
var defaults = {
goalAmount: 100,
currentAmount: 50,
speed: 1000,
textBefore: '',
textAfter: '',
milestoneNumber: 70,
milestoneClass: 'almost-full',
callback: function() {}
}
var options = $.extend(defaults, options);
return this.each(function(){
var obj = $(this);
// Collect and sanitize user input
var goalAmountParsed = parseInt(defaults.goalAmount);
var currentAmountParsed = parseInt(defaults.currentAmount);
// Calculate size of the progress bar
var percentage = (currentAmountParsed/goalAmountParsed) * 100;
var milestoneNumberClass = (percentage > defaults.milestoneNumber) ? ' ' + defaults.milestoneClass : ''
// Generate the HTML
var progressBar = '<div class="progressBar">' + defaults.textBefore + defaults.textAfter + '</div>';
var progressBarWrapped = '<div class="goalProgress' + milestoneNumberClass + '">' + progressBar + '</div>';
// Append to the target
obj.append(progressBarWrapped);
// Ready
var rendered = obj.find('div.progressBar');
// Remove Spaces
rendered.each(function() {
$(this).html($(this).text().replace(/\s/g, ' '));
});
// Animate!
rendered.animate({width: percentage +'%'}, defaults.speed, defaults.callback);
if(typeof callback == 'function') {
callback.call(this)
}
});
}
});
}(window.jQuery);