向下滚动到Javascript进度条后加载该进度条
Load a Javascript progress bar after scrolling down to it
我已经将jQuery 1.12.2与animate.css一起使用,它成功地填充了进度条。现在,我试图只在向下滚动到进度条后加载进度条,就像当前直接加载一样。在页面底部的某个地方,当它已经加载时,拥有这个很棒的功能有什么意义?
我在这里创建了一个JSFiddle。我知道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);
不运行此
$('#myid').goalProgress({
goalAmount: 100,
currentAmount: 75,
textBefore: 'myid ',
textAfter: ''
});
});
关于.ready
事件
尝试在scroll
事件上运行它。例如,制作一个算法来检查此#mydiv
是否在视口中,然后触发此函数。
或者使用一些现成的插件。例如:http://scrollmagic.io/
相关文章:
- jQuery Lazy加载动画滚动
- 如何做javascript连续滚动-自动加载
- 页面加载时自动滚动到底部
- 我如何发送AJAX请求的内容是通过无限滚动加载的
- 向下滚动到Javascript进度条后加载该进度条
- AJAX加载和页面滚动
- 使用jQuery加载页面时自动向上滚动
- Jquery无休止滚动加载来自其他站点的内容
- 如何在水平滚动 Jquery 上实现延迟加载
- 无限滚动:从数据库加载所有数据并滚动以显示更多
- 等到无限滚动完成加载 - Javascript
- 加载、滚动、放大和缩小图像,如谷歌地图
- 滚动到页面顶部,而不刷新/重新加载该页面
- 在用户滚动时加载单个页面网站的不同部分
- 滚动到底部后获取动态加载的HTML
- 向右滚动加载数据
- 使用Twitter引导程序's Scrollspy到延迟加载(滚动加载)异步JavaScript
- 页面重新加载后滚动到特定位置
- 页面滚动时加载角度视图和控制器太慢
- 为什么无限滚动总是加载相同的图像