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

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-04-03 00:23:05 +03:00
parent 150d92f10f
commit 8f221d05c4
18 changed files with 227 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.9 KiB

32
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.svg Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="488px" height="246px" viewBox="0 0 488 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>carousel1.svg</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="carousel1.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="40" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="176" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="244" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="312" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="380" y="97" width="66" height="66" rx="10"></rect>
<text id="…-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="406" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" x="39" y="96" width="410" height="68"></rect>
<path d="M244,59 L244,196 L36,196 L36,59 L244,59 Z M19,42 L261,42 L261,213 L19,213 L19,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="div-(контейнер)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82.5" y="32">div (контейнер)</tspan>
</text>
<text id="130x130" sketch:type="MSTextLayer" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="48" y="133">130x130</tspan>
</text>
<text id="ul-(width:-9999px)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="71.5" y="82">ul (width: 9999px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" sketch:type="MSShapeGroup" x="447" y="90" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.3 KiB

34
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.svg Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="639px" height="246px" viewBox="0 0 639 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>carousel2.svg</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="carousel2.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="40" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="176" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="244" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="312" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="380" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-26" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="448" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-25" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="516" y="97" width="66" height="66" rx="10"></rect>
<text id="…-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="542" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" x="39" y="96" width="544" height="68"></rect>
<path d="M450,59 L450,196 L242,196 L242,59 L450,59 Z M225,42 L467,42 L467,213 L225,213 L225,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="div-(контейнер)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="288.5" y="32">div (контейнер)</tspan>
</text>
<text id="130x130" sketch:type="MSTextLayer" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="252" y="133">130x130</tspan>
</text>
<text id="ul-(margin-left:--35" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="254.5" y="82">ul (margin-left: -350px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" sketch:type="MSShapeGroup" x="582" y="83" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

6
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md
View file

@ -2,7 +2,7 @@
Нужно расположить его внутри `<div>` фиксированного размера, так чтобы в один момент была видна только нужная часть списка:
<img src="carousel1.png">
<img src="carousel1.svg">
Чтобы список был длинный и элементы не переходили вниз, ему ставится `width: 9999px`, а элементам `<li>`, соответственно, `float:left`, либо для элементов используется `display: inline-block`, как в этом решении.
@ -10,9 +10,9 @@
В частности, для `<img>` нужно поставить в стилях явно `display:block`, чтобы пространства под ними не оставалось.
Для "прокрутки" будем сдвигать `<ul>`. Это можно делать по-разному, например, назначением `margin-left`:
Для "прокрутки" будем сдвигать `<ul>`. Это можно делать по-разному, например, назначением CSS-свойства `transform: translateX()` или `margin-left`:
<img src="carousel2.png">
<img src="carousel2.svg">
У внешнего `<div>` фиксированная ширина, поэтому "лишние" изображения обрезаются.