Всем привет!
Сам не знаю нафига
, написал(а точнее отредактировал) такую штуку
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nanobar.js</title>
</head>
<script>
var Nanobar = (function () {
'use strict';
var Bar, Nanobar, move, place, init,
move = function () {
var self = this,
dist = this.width - this.here;
if (dist < 0.1 && dist > -0.1) {
place.call( this, this.here );
this.moving = false;
if (this.width == 100) {
this.el.style.height = 0;
setTimeout( function () {
self.cont.el.removeChild( self.el );
}, 300);
}
} else {
place.call( this, this.width - (dist/10) );
setTimeout( function () {
self.go();
}, 20);
}
};
place = function (num) {
this.width = num;
this.el.style.width = this.width + '%';
};
init = function () {
var bar = new Bar( this );
this.bars.unshift( bar );
};
Bar = function ( cont ) {
this.el = document.createElement( 'div' );
this.el.id = 'nanobar';
this.width = 0;
this.here = 0;
this.moving = false;
this.cont = cont;
cont.el.appendChild( this.el );
};
Bar.prototype.go = function (num) {
if (num) {
this.here = num;
if (!this.moving) {
this.moving = true;
move.call( this );
}
} else if (this.moving) {
move.call( this );
}
};
Nanobar = function () {
var el;
this.bars = [];
el = this.el = document.createElement( 'div' );
this.el.id = 'nanodiv';
el.style.position = 'fixed';
document.getElementsByTagName( 'body' )[0].appendChild( el );
init.call( this );
};
Nanobar.prototype.go = function (p) {
this.bars[0].go( p );
if (p == 100) {
init.call( this );
}
};
return Nanobar;
})();
</script>
<body>
<div class="container">
<br>
<h1>nanobar.js</h1>
<br>
<div class="general-buttons">
<button class="doc_go" onClick="nanobar.go(30)">nanobar.go(30)</button>
<button class="doc_go" onClick="nanobar.go(60)">nanobar.go(60)</button>
<button class="doc_go" onClick="nanobar.go(100)">nanobar.go(100)</button>
</div>
<br>
<hr>
<br>
<p>© 2015 <a href="https://github.com/jacoborus">jacoborus</a> - <a href="https://raw.github.com/jacoborus/nanobar/master/LICENSE">MIT License</a></p>
</div>
<script>
var nanobar = new Nanobar();
nanobar.go(50);
</script>
</body>
<style>
/* стилизация страници */
*{
margin:0;
padding:0;
}
.container{margin:0 auto;max-width: 800px;}
/* /\/\/\/\/\/\/\/\/\/\/\ */
body {
margin: 0; /* удаляем отступы */
}
#nanobar {
background: #ff0000; /* фон */
border-radius: 0px 5px 5px 0px; /* закругление углов */
z-index: 9999; /* верхний индекс */
-webkit-box-shadow: 2px 2px 5px 0px #000000; /* тень для chrome */
-moz-box-shadow: 2px 2px 5px 0px #000000; /* тень для firexox */
box-shadow: 2px 2px 5px 0px #000000; /* тень для остальных браузеров */
filter: progid:DXImageTransform.Microsoft.shadow(direction=135, color=#000000, strength=4); /* тень для Internet Explorer */
width: 0; /* без этого полоска не хочет прятаться =) */
height: 4px; /* ширина полоски */
clear: both;
-webkit-transition: all ease; /* анимация для chrome */
-moz-transition: all ease; /* анимация для firexox */
-o-transition: all ease; /* анимация для opera */
transition: all ease; /* анимация для остальных браузеров */
}
#nanodiv {
width: 100%;
height: 5px;
z-Index: 9999;
top: 0;
}
</style>
</html>
Я написал от лени(просто нефиг делать), а нафига и сам не знаю
Помогите нее куда нибудь применить
