Как подвинуть картинку в html

Как подвинуть картинку в html

You can easily move images in HTML using <marquee> tag. It is used to create scrolling images either from horizontally left to right or right to left, or vertically top to bottom or bottom to top. By default, image found within the <marquee> tag will scroll from right to left.

Syntax:

Attributes of <marquee> tag:

• direction: Sets the direction for the scrolling images. The value of this attribute can be left, right, up or down.
• behavior: The behavior tells about how the text scrolls. It can be one of the following values which are alternate, scroll, slide.

Example 1: The following example uses scroll behavior.

Перемещения и трансформации в CSS3

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

Система координат

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

1: Горизонтальное перемещение

Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

• object: Установление главных правил нашего объекта.
• van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
• move-right: Используя этот класс, мы будем двигать наш объект.

В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0);. Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе .object.

• linear: перемещение происходит постоянной скоростью от начала и до конца.
• ease: перемещение начинается медленно и затем набирает скорость.
• ease-in: перемещение начинается медленно.
• ease-out: перемещение заканчивается медленно.
• ease-in-out: перемещение начинается и заканчивается медленно.
• cubic-bezier: ручное определение значения перемещения.

Двигаемся влево

Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ, в то время как Y остается неизменным. В нашем случае мы переместим объект на —350px влево.

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); — переместим объект влево.

Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО

2: Вертикальное перемещение

Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:

Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

CSS

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

CSS

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).

HTML

CSS

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).

HTML

CSS

5: Масштабирование

Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.

HTML

CSS

6: Множественные движения

После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.

HTML

CSS
План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.

Методы позиционирования элементов в CSS

HTML-документ состоит из большого количества элементов, вложенных друг в друга. Чтобы из этих элементов и CSS построить изображение страницы , их необходимо как-то в ней расположить. По умолчанию размещение всех элементов на странице осуществляется в нормальном или базовом потоке .

Что это значит? Во-первых, вывод элементов на страницу браузер осуществляет в том порядке, в котором они следуют в HTML коде .

Во-вторых, в коде элементы вложены друг в друга, и чтобы это учитывать при выводе используют так называемые воображаемые слои для отображения элементов . При этом слой элемента тем выше (ближе к нам), чем данный элемент является более вложенным в коде, т.е. глубже расположен в нём.

В-третьих, положение элемента в потоке зависит от значения свойства display .

Например, элементы, имеющее блочное отображение ( display: block ) отображаются в потоке как прямоугольные области, каждый из них на новой линии друг под другом сверху вниз.

Ширина элементов с блочным отображением по умолчанию равна доступной ширине родительского элемента, т.е. элемента, в который каждый из них непосредственно вложен. Высота их по умолчанию равна такой величине, которой будет достаточно, чтобы отобразить весь контент, который находится в каждом из них.

Элементы со строчным отображением ( display: inline ) выводятся иначе. Они в отличии от блочных элементов не размещаются каждый на новой строке, а следуют друг за другом слево направо. Если пространство справа закончилось, то они переносятся на следующую строку, а не на новую линию как элементы с блочным отображением.

Кроме block , inline есть и другие варианты отображения элементов, но все они располагаются в базовом потоке документа.

В CSS есть свойства, с помощью которых элементы можно «вырвать» из основного потока документа и задать им другое положение вне базового потока элементов.

К этим свойствам относятся position и float .

CSS-свойство position

CSS свойство position — это одно из свойств с помощью которого можно изменить базовое поведение элементов в потоке. Другими словами, данное свойство позволяет «выдернуть» любой элемент из потока документа и разместить его в другом месте относительно окна браузера или других элементов на веб-странице.

Свойство position имеет 5 значений:

• static (статичное позиционирование);
• relative (относительное);
• absolute (абсолютное);
• fixed (фиксированное);
• sticky (липкое).

static — это значение по умолчанию. Оно означает что элемент находится в базовом потоке.

Каждый элемент в потоке занимает определённую область. Но область элемента не всегда сохраняется за ним при его позиционировании.

Это, например, происходит при задании элементу position: absolute или position: fixed . В этом случае место не сохраняется за элементом. Другие элементы его «не видят» и располагаются, игнорируя его присутствие в коде.

Статичное позиционирование (static)

Свойство position со значением static элементам назначается по умолчанию . Это значение означает что элемент является не позиционированным , т.е. отображается как обычно (в потоке).

Явная установка элементу CSS-свойства position: static может понадобиться только в том случае, когда нужно переопределить другое значение position установленное элементу.

Установка CSS свойств для задания положения элемента left , top , right и bottom никакого влияния на него не оказывают, т.к. его местонахождение определяется потоком документа .

Пример выстраивания статично позиционированных элементов:

Относительное позиционирование (relative)

Установка относительного позиционирования элементу осуществляется посредством задания ему CSS свойства position: relative .

Относительно позиционированный элемент ведёт себя как элемент в потоке за исключением того, что его текущее положение можно при помощи определённых CSS свойств сместить. К этим CSS свойствам относятся left , top , right и bottom .

Например, для того чтобы элемент сдвинуть вверх или вниз относительного его исходного положения к нему нужно применить CSS свойство top или bottom :

Если одновременно установить top и bottom , то будет применено значение top , т.к. оно является более приоритетным, чем bottom :

Для сдвига элемента вправо или влево используется CSS свойство left или right :

Если одновременно установить left и right , то приоритетным будет значение, находящееся в left :

Для сдвига по двум осям нужно использовать top или bottom , и left или right :

Пример, в котором 2 элементу установим относительное позиционирование и сместим его на 20px вверх и влево относительно его исходного положения:

Если в некоторой области страницы оказываются несколько позиционированных элементов, то они перекрывают друг на друга в определённом порядке. При этом по умолчанию выше оказывается тот элемент, который ниже описан в коде. Но порядок перекрытия элементов (их положение перпендикулярное экрану, т.е. вдоль оси Z) можно изменить. Осуществляется в CSS это с помощью свойства z-index . z-index может принимать отрицательные и положительные целые число, auto и 0 . Но, хорошей практикой является использование в качестве z-index чисел из диапазона 0-9999 .

При этом чем больше у элемента значение z-index , тем ближе он располагается к нам, и, следовательно, перекрывает все элементы в данной области, у которых значение z-index меньше.

Абсолютное позиционирование (absolute)

Установка абсолютного позиционирования элементу осуществляется посредством задания ему position: absolute .

Этот тип позиционирования позволяет разместить элемент именно там, где вы хотите.

Позиционирование выполняется относительно ближайшего позиционированного предка.

Под позиционированным элементом понимается элемент с position , равным relative , absolute , fixed или sticky .

В этом примере позиционирование элемента #id-3 будет выполнять относительно #id-2 , т.к. он является позиционированным и является по отношению к нему более близким предком.

Если данный элемент не был бы позиционированным, то позиционирование #id-3 выполнялось бы относительно #id-1 :

Если среди предков у элемента с position: absolute нет позиционированного элемента, то в этом случае он будет позиционироваться относительно HTML страницы, т.е. элемента body .

Когда элементу устанавливаем position: absolute без указания CSS-свойств ( top , left , right и bottom ), определяющих его положение , он будет находиться в том месте, в котором он был бы расположен, если бы находился в потоке (при этом при вычислении его положения учитываются только элементы, расположенные до него в коде и находящиеся в потоке).

При этом другие элементы его видеть не будут, и, следовательно, они будут расположены на странице, не обращая никакого внимание на него.

CSS-свойства для управления положением абсолютно позиционированного элемента работают по-другому чем с position: relative .

CSS-свойства top , bottom , left и right задают положение элемента относительно ближайшего позиционированного предка или body , если такого предка нет.

Установить ширину (высоту) абсолютно позиционированному можно с помощью установки ему двух координат top и bottom ( left и right ).

Если элементу одновременно установить top , bottom и height , то предпочтение будет отдано top и height .

Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.

Фиксированное позиционирование (fixed)

Задание элементу фиксированного позиционирования осуществляется посредством установки ему position: fixed .

Фиксированное позиционирование похоже на абсолютное, но в отличии от него оно всегда привязывается к краям окна браузера (viewport), и остаётся в таком положении даже при скроллинге страницы.

Фиксированное позиционирование применяется для закрепления на странице навигационных меню, кнопки «вверх», панелей с социальными кнопками и многого другого.

Совместное использование относительного и абсолютного позиционирования

Относительное позиционирование очень часто используется вместе с абсолютным позиционированием.

1. Если расположить блоки с абсолютным позиционированием в блок с относительным, то расстояния будут уже задаваться не от края окна браузера, а от границ относительного блока.
2. Например: для создания фиксированных макетов состоящих из 3 блоков, выровненных по верхнему краю. Установим высоту «400px» относительному блоку для наглядности .
3. Дополнительно к блокам можно применять свойство z-index , которое предназначено для позиционирования элементов по оси Z. Чем больше значение свойства z-index , тем ближе элемент расположен к нам, и наоборот, чем меньше значение, тем дальше расположен элемент от нас.

Перемещаем изображение по странице

Многие знают из программистов, а уж тем более из сайтостроителей, то для чего применяется CSS. Естественно основная его задача это отделение контента от дизайна. Но не будем углубляться в теорию, а посмотрим на это с другой стороны. А именно с той, как можно использовать CSS в паре с JavaScript. Мы по ходу данной статьи разберем пример того, как можно перемещать изображение прямо на странице. Но не все так просто, если брать во внимание кроссбраузерность (по крайней мере, с Internet Explorer и Opera). Вот Internet Explorer нам как раз и устроит сюрприз, но мы сделаем «финт ушами» и избавимся от него. Позже я расскажу, как в нашем случае обмануть Internet Explorer.

Для начала, создаем пустую html страницу. Сразу хочу отметить, что писать внешние скрипты и стили мы не будем, а будем все держать в одном месте. Хотя с профессиональной точки зрения это не правильно. И так создаем два стиля: один класс и один ID.

Далее в любом месте на странице (я предпочитаю в конце) размещаем DIV блок (вернее два, один вложен в другой).
Код выглядит вот так:

Сразу хочу остановиться на моменте, почему мы не могли обойтись классом или одним ID, а потому что подругому пока не получается. Феномен. Ну а теперь осталось самое главное – это код на JavaScript. Открываем секцию

Сразу объявим две глобальные переменные:

Следующие две функции особо рассматривать не будем, просто напишите вот такой код:

Единственное что можно сказать, так это то, что первая функция переводит строку в число, а вторая вычисляет координаты курсора мыши. Далее остались функции, которые собственно и будут осуществлять показ, скрывать и перемещать изображение. Для того чтобы продолжать дальше, нам необходимо работать с DIV блоками. Первый блок у нас имеет идентификатор – screenshow, а второй – screenmoving. Чтобы нам эти блоки найти, мы воспользуемся функцией getElementById, которая и находит элемент по его идентификатору. Далее сразу после нахождения элементов, необходимо определить координаты курсора мыши (именно в тот момент, когда вы нажали на ссылку). В функции showscreen, screenmove и screendown передается всего один параметр – evt. Атрибут event – обязателен. Собственно благодаря ему мы и определяем координаты курсора. Ну вот и первая функция, которая и отвечает за первоначальный показ изображения.

Обратите внимание на то, что атрибуты стиля написаны заглавными буквами, это неспроста. По другому не выходит. Пришлось провести ряд экспериментов, но это уже другая история…

Далее идет функция, которая прячет DIV блоки и убирает их со страницы. Все довольно просто. Всего лишь в стилях двух блоков, атрибуту display присваивается значение none. И нашему флагу присваивается значение false.

Далее идет функция screendown, которая обрабатывает нажатие кнопки мыши. Все что в ней происходит, так это то, что вычисляются координаты курсора мыши и флагу присваивается значение true, с таким значением флаг означает, что кнопка мыши нажата и удерживается.

Далее идет функция screenup, которая обрабатывает событие при отпускании кнопки мыши.

Ну вот, практически и все, осталось только рассмотреть последнюю функцию, которая собственно и осуществляет само перемещение изображения.

Ну и последний шаг это вставить ссылку. В нашем случае это вот такой код:

Который в комментарии я думаю, не нуждается.
Теперь можете кликнуть по ссылке «демонстрация» и посмотреть что должно получиться в итоге.

Теперь из истории про обман IE

Дело в том, что можно было обойтись всего лишь одним блоком. Но в Internet Explorer такой способ не проходит. Так как получается, будто мы двигаем картинку. Но вот собственно мной был придуман следующий метод: создаем первый слой, на первом слое размещаем изображение, и на первом же слое размещаем второй слой, который по размеру делаем таким как и первый. Затем в качестве фона на втором слое устанавливаем несуществующую страницу формата html. В итоге он получается как бы прозрачным. Если фон не задавать вообще, то IE опять же не позволит двигать картинку. А если фон сделать какого нибудь цвета, то мы естественно не увидим самой картинки. Демо версию скачать можно здесь.