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

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/carousel1.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/carousel2.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8 KiB

28
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/solution.md Normal file
View file

@ -0,0 +1,28 @@
# HTML/CSS
Лента изображений должна быть оформлена как список, согласно принципам семантической вёрстки.
Нужно стилизовать его так, чтобы он был длинной лентой, из которой внешний `DIV` вырезает нужную часть для просмотра:
<img src="carousel1.png">
Чтобы список был длинный и элементы не переходили вниз, ему ставится `width: 9999px`, а элементам, соответственно, `float:left`.
[warn header="Не используйте display:inline"]
Элементы с `display:inline` имеют дополнительные отступы для возможных "хвостов букв".
В частности, для `img` нужно поставить в стилях явно `display:block`, чтобы пространства под ними не оставалось.
[/warn]
При прокрутке UL сдвигается назначением `margin-left`:
<img src="carousel2.png">
У внешнего `DIV` фиксированная ширина, поэтому "лишние" изображения обрезаются.
Снаружи окошка находятся стрелки и внешний контейнер.
Реализуйте эту структуру, и к ней прикручивайте обработчики, которые меняют `ul.style.marginLeft`.
# Полное решение
[edit src="solution"]Открыть в песочнице[/edit]

1
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/solution/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"carousel","plunk":"0XReVAKUmkxra8Pb4Wld"}

1
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/solution/carousel/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"carousel","plunk":"0XReVAKUmkxra8Pb4Wld"}

71
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/solution/carousel/index.html Executable file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="carousel">
<a href="#" class="arrow left-arrow" id="prev">&#8249; </a>
<div class="gallery">
<ul id="images">
<li><img src="http://js.cx/carousel/1.png"></li>
<li><img src="http://js.cx/carousel/2.png"></li>
<li><img src="http://js.cx/carousel/3.png"></li>
<li><img src="http://js.cx/carousel/4.png"></li>
<li><img src="http://js.cx/carousel/5.png"></li>
<li><img src="http://js.cx/carousel/6.png"></li>
<li><img src="http://js.cx/carousel/7.png"></li>
<li><img src="http://js.cx/carousel/8.png"></li>
<li><img src="http://js.cx/carousel/9.png"></li>
<li><img src="http://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');
// обычно лучше использовать CSS-классы,
// но этот код - для удобства разработки, так что не будем трогать стили
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 элемент
position = Math.min(position + width*count, 0)
ul.style.marginLeft = position + 'px';
return false;
}
document.getElementById('next').onclick = function() {
if (position <= -width*(imgs.length-count)) return false; // уже до упора
// последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
position = Math.max(position-width*count, -width*(imgs.length-count));
ul.style.marginLeft = position + 'px';
return false;
};
</script>
</body>
</html>

52
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/solution/carousel/style.css Executable 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;
}

71
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/solution/index.html Executable file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="carousel">
<a href="#" class="arrow left-arrow" id="prev">&#8249; </a>
<div class="gallery">
<ul id="images">
<li><img src="http://js.cx/carousel/1.png"></li>
<li><img src="http://js.cx/carousel/2.png"></li>
<li><img src="http://js.cx/carousel/3.png"></li>
<li><img src="http://js.cx/carousel/4.png"></li>
<li><img src="http://js.cx/carousel/5.png"></li>
<li><img src="http://js.cx/carousel/6.png"></li>
<li><img src="http://js.cx/carousel/7.png"></li>
<li><img src="http://js.cx/carousel/8.png"></li>
<li><img src="http://js.cx/carousel/9.png"></li>
<li><img src="http://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');
// обычно лучше использовать CSS-классы,
// но этот код - для удобства разработки, так что не будем трогать стили
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 элемент
position = Math.min(position + width*count, 0)
ul.style.marginLeft = position + 'px';
return false;
}
document.getElementById('next').onclick = function() {
if (position <= -width*(imgs.length-count)) return false; // уже до упора
// последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
position = Math.max(position-width*count, -width*(imgs.length-count));
ul.style.marginLeft = position + 'px';
return false;
};
</script>
</body>
</html>

52
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/solution/style.css Executable 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;
}

13
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/task.md Normal file
View file

@ -0,0 +1,13 @@
# Карусель
[importance 5]
Напишите "Карусель" -- ленту изображений, которую можно листать влево-вправо нажатием на стрелочки.
[iframe height=200 src="solution"]
В дальнейшем к ней можно легко добавить анимацию, динамическую подгрузку и другие возможности.
В этой задаче разработка HTML/CSS-структуры составляет 90% решения.
[edit src="task" task/]

1
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/task/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"carousel-src","plunk":"upp5iHCJxVDJl5WMLiil"}

42
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/task/index.html Executable file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- ваша верстка виджета, ваши стили -->
<ul id="images">
<li><img src="http://js.cx/carousel/1.png"></li>
<li><img src="http://js.cx/carousel/2.png"></li>
<li><img src="http://js.cx/carousel/3.png"></li>
<li><img src="http://js.cx/carousel/4.png"></li>
<li><img src="http://js.cx/carousel/5.png"></li>
<li><img src="http://js.cx/carousel/6.png"></li>
<li><img src="http://js.cx/carousel/7.png"></li>
<li><img src="http://js.cx/carousel/8.png"></li>
<li><img src="http://js.cx/carousel/9.png"></li>
<li><img src="http://js.cx/carousel/10.png"></li>
</ul>
<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);
}
</script>
<script>
// ваш код..
</script>
</body>
</html>