mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
add progress indicator
This commit is contained in:
parent
887da411e4
commit
2680f4756f
@ -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/
|
||||
|
@ -18,7 +18,7 @@ var p = new Point();
|
||||
|
||||
任何带有默认值的参数,被视为可选参数。不带默认值的参数,则被视为必需参数。
|
||||
|
||||
利用参数默认值,可以指定一个参数不得省略,如果省略就抛出一个错误。
|
||||
利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。
|
||||
|
||||
```javascript
|
||||
|
||||
|
@ -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
|
||||
|
18
js/ditto.js
18
js/ditto.js
@ -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();
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user