ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Увеличение изображения на javascript и CSS

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

Оригинальное решение для увеличения изображения в заданном каркасе, что производится при наведении курсора с использованием чистого Javascript. Теперь можете легко увеличить картинку, используя только HTML и CSS, но однако здесь было применено некоторое количество JavaScript. Но и само увеличение снимка идет в особом формате, что вероятно многие встречали на интернет магазинов. Где наводя на картинку, и она увеличивается, где все отлично видно, даже мелкие элементы.

Также этот тип варианта масштабирования изображений с использованием JavaScript можно задействовать в различных по дизайну слайдерах или галереях. Самым важным моментом является то, что вы можете перемещать изображение после увеличения. Если бы использовался только CSS, изображение не могло быть перемещено. И по этой причине здесь был задействован JavaScript для перемещения по Оси X и Y. Где теперь наводя на снимок, то вместо курсора появляется лупа, что просто ведя по сторонам мы рассматриваем уже увеличенную картинку.

По умолчанию:

Идет увеличение в оформленном блоке:

Как увеличить изображение с наведением курсора на JS и CSS

Установка:

Шаг 1. Базовая структура увеличения изображения при наведении курсора

HTML

Код

Шаг 2. Оформление изображение с помощью CSS

CSS

Код

figure.candle {
  background-position: 50% 50%;
  position: relative;
  margin: 142px auto;
  border: 5px solid white;
  box-shadow: -2px 3px 9px 1px #1c1c1c;
  height: 295px;
  width: 485px;
  overflow: hidden;
  cursor: zoom-in;
}
figure.candle img:hover {
  opacity: 0;
}
figure.candle img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
}

Шаг 3. Масштабирование изображения при наведении курсора на JavaScript

JS

Код

function zoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

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

Если вы заметите, то поймете, что вокруг изображения есть красивый обвод, для которого box-shadow: -1px 5px 15px был прописан для светлого формата. Если у кого темный, то здесь не чего сложного, чтоб перевести все под нужную палитру цвета.

Демонстрация

06 Октября 2021 Загрузок: 2 Просмотров: 3136 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0