Как сделать картинку которая меняется при открытии
Перейти к содержимому

Как сделать картинку которая меняется при открытии

  • автор:

Смена картинки при нажатии

Тебе нужно перенести блок с скриптом в конец body. т.к. HTML страница рендерится по очереди кода. ниже пример где должно работать:

  Смена картинок    var i=0; var image=document.getElementById("image"); // Добавте свои картинки через запятую var imgs=new Array('note.png','note_30.png', 'note_30_.png'); function imgsrc()  

Отслеживать
user236980
ответ дан 4 авг 2016 в 20:48
21 1 1 бронзовый знак

    Важное на Мете
Связанные
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.3.1.5619

Как увеличить картинку при наведении?

За изменение масштаба изображения отвечает свойство transform с функцией scale() . В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.2 увеличивает масштаб на 20%.

Чтобы картинка увеличивалась при наведении на неё курсора мыши, свойство transform следует привязать к псевдоклассу :hover, как показано в примере 1.

Пример 1. Увеличение картинки

Увеличение изображения

При наведении на картинку масштаб меняется мгновенно, поэтому для плавного увеличения изображения добавлено свойство transition , оно задаёт время масштабирования.

Если требуется масштабировать картинку, не увеличивая при этом её размеры, то каждое изображение надо поместить в . Для него задать свойство display со значением inline-block , чтобы стал размером с изображение; а также overflow со значением hidden , чтобы пряталось всё за пределами (пример 2).

Пример 2. Использование overflow

У изображений внутри строчно-блочных элементов снизу появляется небольшой отступ, его можно убрать с помощью свойства display со значением block .

См. также

  • :focus на мобильных устройствах
  • overflow
  • transform
  • Анимация ссылок при наведении
  • Атрибут scroll
  • Виды ссылок
  • Всплывающая подсказка
  • Высота и ширина в CSS
  • Звёздные войны
  • Использование :hover
  • Липкое позиционирование
  • Несколько псевдоэлементов
  • Нормальное позиционирование
  • Ориентация
  • Очистка float
  • Переходы с помощью :hover
  • Повёрнутые рамки
  • Подробнее о позиционировании
  • Подсветка строк и колонок таблицы
  • Псевдокласс :hover
  • Псевдоклассы в CSS
  • Работа с типографикой
  • Селекторы CSS
  • Состояния кнопок
  • Сочетание с псевдоклассами
  • Типы ссылок
  • Трансформация
  • Трансформация
  • Трансформация в CSS
  • Функции трансформации

При hover менять картинки?

Добрый день, подскажите пожалуйста как реализовать плавность смены картинок.

60881eac39343533122778.png

При наведении на карточки, справа меняются картинки.
Сейчас реализовано вот так

    Грузчик

    30 000

    01
var liElems = document.querySelectorAll(".vacancion__item"), output = document.querySelector('.vacancion__img'); for (var i = 0; i < liElems.length; i++) < liElems[i].addEventListener("mouseenter", function(e) < output.src = this.dataset.img; >); >
  • Вопрос задан более двух лет назад
  • 338 просмотров

2 комментария

Средний 2 комментария

hisbvdis

Frostik12 , выложите, пожалуйста, полноценный пример кода, например, на CodePen.
Чтобы можно было посмотреть, как и что там меняется и на Вашем же примере показать варианты решения

Frostik12 @Frostik12 Автор вопроса
Решения вопроса 1

hisbvdis

  1. Добавляем под текущую картинку новую elem.prepend(. )
  2. У картинок свойство «transition: 1s»
  3. Добавляем текущей картинке класс со свойством «opacity: 0» (она постепенно скрывается и если нужно, потом удаляем сам элемент из DOM)
  4. Обновляет картинку, которая будет «текущей» по наличию класса

Идея с подстановкой «src» из атрибута «data-img» не очень хорошая. Если пользователь через мобильный зашел на сайт и скорость подключения маленькая или телефон не очень шустрый, картинки будут подгружаться с задержкой. Кажется, лучше их сразу все загрузить и просто скрывать все, а у нужной «opacity» выставлять на «1». Ну или в спрайт. Зависит от количества и качества.

Крутой эффект изменение картинки на CSS

Крутой эффект изменение картинки на CSS

Как поняли, это здесь мы задействовали 2 изображение, где под номером один или при открытии страницы видим черно-белую картинку, как только курсор наводим на основу картинки, как автоматически меняем на цветной рисунок, где даже получается красивый эффект, в том случай, если изображение аналогичны, только разная палитра цветов. Но самый вкус являться в том, что происходящая смена происходит в плавном режиме, а не мгновенно, как многие подумали. Одно из главных, здесь не задействован Javascript.

Если вам нужен просто эффект, который заключается в том, как автоматическая смена картинок на CSS, где на автомате меняются данные картинки по заданному времени, где количество изображений зависит от вас.

Создать смена картинки на другую при наведении курсора на чисто CSS

Здесь как можно заметить, что не так сложно, как изначально может показаться. У нас находиться каркас, где прописаны ссылка на 2 изображения с классами kuneda и vselan.


#karkas_ckuna <
position:relative;
height:385px;
width:180px;
margin:0 auto;
cursor:pointer;
>

#karkas_ckuna img <
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
>

#karkas_ckuna img.vselan:hover <
opacity:0;
>

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

Если интересно, как все работает:

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *