类似 YouTube 的进度条 [英] YouTube-like progress bar
问题描述
我正在尝试制作一个类似于 YouTube 的进度条.该栏应在页面启动时加载.到目前为止我已经尝试过了.这是我的脚本代码
I am trying to make a YouTube-like progress bar. The bar should load at the page startup. I have tried this so far. Here is the code of my script
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
complete: function() {
alert('complete');
}
});
我还包括相同的 jsFiddle，http://jsfiddle.net/ajaSB/3/.
在这个 jsfiddle 中，出现了进度条，但是当我在 IDE 中使用相同的代码并运行文件时，没有出现进度条.我究竟做错了什么?或者是否有其他方法可以得到酒吧?
In this jsfiddle, the progress bar appears, but when I use the same code in my IDE and run the file no progress bar appears. What am I doing wrong? Or if there is another way to get the bar?
推荐答案
这是一个完整的 HTML 页面示例，包括对 jQuery 库的引用.
Here is example of a complete HTML page including reference to the jQuery library.
虽然它大部分可以在没有的情况下工作，但您应该将您的代码包装在一个$(document).ready(...) 以便您确保在运行代码之前加载了所有必需的资源.
Although it will mostly work without, you should wrap your code in a
$(document).ready(...) so that you are sure all required resources are loaded before you run the code.
<!DOCTYPE html>
<html>
<head>
<title>Progress Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$("#progress").css("width", _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
complete: function() {
alert("complete");
}
});
});
</script>
<link href="css/progressbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="progress" class="waiting">
</body>
</html>
请注意，这是针对 jQuery 版本 2，它不支持 Internet Explorer 8 及更早版本.如果您需要支持旧的 Internet Explorer 版本，则应以 jQuery 1.10.2 为目标.
Note that this targets version 2 of jQuery, which does not support Internet Explorer 8 and earlier. If you need support for old Internet Explorer versions, you should target jQuery 1.10.2 instead.
如果进度条没有显示，但你在动画应该完成的四秒后收到了alert("complete")，很可能你对 CSS 的引用是错误的(没有指向正确的位置，或者文件名拼写错误).
If the progress bar does not show, but you do get the alert("complete") after four seconds when the animation should be finished, it is likely that your reference to the CSS is wrong (not pointing to the right place, or misspelled file name).
这篇关于类似 YouTube 的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
