jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

refactor 3-more into separate books

Browse source
This commit is contained in:
Ilya Kantor 2015-02-27 13:21:58 +03:00
parent bd1d5e4305
commit 87639b2740
423 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
5-animation/3-js-animation/1-carousel-animated/solution.md Normal file
View file

@ -0,0 +1,2 @@
Проще всего -- использовать функцию [](#animate), а еще удобнее -- `animateProp`.

92
5-animation/3-js-animation/1-carousel-animated/solution.view/animate.js Normal file
View file

@ -0,0 +1,92 @@
/**
Docs: http://learn.javascript.ru/tutorial/lib
*/
function animate(opts) {
var start = new Date;
var delta = opts.delta || linear;
var timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( delta(progress) );
if (progress == 1) {
clearInterval(timer);
opts.complete && opts.complete();
}
}, opts.delay || 13);
return timer;
}
/**
Анимация стиля opts.prop у элемента opts.elem
от opts.from до opts.to продолжительностью opts.duration
в конце opts.complete
Например: animateProp({ elem: ..., prop: 'height', start:0, end: 100, duration: 1000 })
*/
function animateProp(opts) {
var start = opts.start, end = opts.end, prop = opts.prop;
opts.step = function(delta) {
var value = Math.round(start + (end - start)*delta);
opts.elem.style[prop] = value + 'px';
}
return animate(opts);
}
// ------------------ Delta ------------------
function elastic(progress) {
return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress);
}
function linear(progress) {
return progress;
}
function quad(progress) {
return Math.pow(progress, 2);
}
function quint(progress) {
return Math.pow(progress, 5);
}
function circ(progress) {
return 1 - Math.sin(Math.acos(progress));
}
function back(progress) {
return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5);
}
function bounce(progress) {
for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
}
function makeEaseInOut(delta) {
return function(progress) {
if (progress < .5)
return delta(2*progress) / 2;
else
return (2 - delta(2*(1-progress))) / 2;
}
}
function makeEaseOut(delta) {
return function(progress) {
return 1 - delta(1 - progress);
}
}

87
5-animation/3-js-animation/1-carousel-animated/solution.view/index.html Normal file
View file

@ -0,0 +1,87 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="animate.js"></script>
</head>
<body>
<div class="carousel">
<a href="#" class="arrow left-arrow" id="prev">&#8249; </a>
<div class="gallery">
<ul id="images">
<li><img src="https://js.cx/carousel/1.png"></li>
<li><img src="https://js.cx/carousel/2.png"></li>
<li><img src="https://js.cx/carousel/3.png"></li>
<li><img src="https://js.cx/carousel/4.png"></li>
<li><img src="https://js.cx/carousel/5.png"></li>
<li><img src="https://js.cx/carousel/6.png"></li>
<li><img src="https://js.cx/carousel/7.png"></li>
<li><img src="https://js.cx/carousel/8.png"></li>
<li><img src="https://js.cx/carousel/9.png"></li>
<li><img src="https://js.cx/carousel/10.png"></li>
</ul>
</div>
<a href="#" class="arrow right-arrow" id="next">&#8250; </a>
</div>
<script>
/* этот код помечает картинки, для удобства разработки */
var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++) {
lis[i].style.position='relative';
var span = document.createElement('span');
span.style.cssText='position:absolute;left:0;top:0';
span.innerHTML = i+1;
lis[i].appendChild(span);
}
/* конфигурация */
var width = 130; // ширина изображения
var count = 3; // количество изображений
var ul = document.getElementById('images');
var imgs = ul.getElementsByTagName('li');
var position = 0; // текущий сдвиг влево
document.getElementById('prev').onclick = function() {
if (position >= 0) return false; // уже прокручено до конца влево
// последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
var newPosition = Math.min(position + width*count, 0);
animateProp({
elem: ul,
prop: "marginLeft",
start: position,
end: newPosition,
duration: 250,
delay: 20
});
position = newPosition;
return false;
}
document.getElementById('next').onclick = function() {
if (position <= -width*(imgs.length-count)) return false; // уже прокручено до конца вправо
// последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
var newPosition = Math.max(position-width*count, -width*(imgs.length-count));
animateProp({
elem: ul,
prop: "marginLeft",
start: position,
end: newPosition,
duration: 250,
delay: 20
});
position = newPosition;
return false;
};
</script>
</body>
</html>

52
5-animation/3-js-animation/1-carousel-animated/solution.view/style.css Normal file
View file

@ -0,0 +1,52 @@
body {
padding: 10px
}
.carousel {
position: relative;
width: 398px;
padding: 10px 40px;
border: 1px solid #CCC;
border-radius: 15px;
background: #eee;
}
.carousel img {
width: 130px;
height: 130px;
display: block; /* если не поставить block, в ряде браузеров будет inline -> лишнее пространтсво вокруг элементов */
}
.carousel .arrow {
position: absolute;
top: 57px;
padding: 3px 8px 8px 9px;
background: #ddd;
border-radius: 15px;
font-size: 24px;
color: #444;
text-decoration: none;
}
.carousel .arrow:hover {
background: #ccc;
}
.carousel .left-arrow {
left: 7px;
}
.carousel .right-arrow {
right: 7px;
}
.gallery {
width: 390px;
overflow: hidden;
}
.gallery ul {
height: 130px;
width: 9999px;
margin: 0;
padding: 0;
list-style: none;
}
.gallery ul li {
float: left;
}

10
5-animation/3-js-animation/1-carousel-animated/task.md Normal file
View file

@ -0,0 +1,10 @@
# Анимируйте карусель
[importance 5]
Возьмите решение задачи [](/task/carousel) и сделайте передвижение карусели плавным, анимированым.
Подключите для этого файл <a href="/files/tutorial/js/animate.js">animate.js</a>.
Результат:
[iframe height=220 src="solution"]