1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 10:22:23 +00:00

add progress indicator

This commit is contained in:
ruanyf 2014-05-01 13:18:22 +08:00
parent 887da411e4
commit 2680f4756f
4 changed files with 28 additions and 1 deletions

View File

@ -354,6 +354,14 @@ body {
}
}
.progress-indicator-2 {
position: fixed;
top: 0;
left: 0;
height: 3px;
background-color: #0A74DA;
}
/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/

View File

@ -18,7 +18,7 @@ var p = new Point();
任何带有默认值的参数,被视为可选参数。不带默认值的参数,则被视为必需参数。
利用参数默认值,可以指定一个参数不得省略,如果省略就抛出一个错误。
利用参数默认值,可以指定一个参数不得省略,如果省略就抛出一个错误。
```javascript

View File

@ -26,6 +26,7 @@
<div id="loading">Loading ...</div>
<div id="error">Opps! ... File not found!</div>
<div id="flip"><div id="pageup">上一章</div><div id="pagedown">下一章</div></div>
<div class="progress-indicator-2"></div>
<script>
// essential settings

View File

@ -258,6 +258,24 @@ function router() {
$('#pagedown').css('display','inline-block');
}
(function(){
var $w = $(window);
var $prog2 = $('.progress-indicator-2');
var wh = $w.height();
var h = $('body').height();
var sHeight = h - wh;
$w.off('scroll');
$w.on('scroll', function(){
var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
updateProgress(perc);
});
function updateProgress(perc){
$prog2.css({width : perc*100 + '%'});
}
}());
}).fail(function() {
show_error();