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

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

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

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

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

JS/CSS как увеличить изображение

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

Увеличение картинки средствами CSS

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


Установка:

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

HTML

Код
<figure class="candle" onmousemove="zoom(event)" style="background-image: url(http://zornet.ru/_fr/56/7033799.jpg)">
  <img src="http://zornet.ru/_fr/56/7033799.jpg" />
</figure>

Шаг 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 был прописан для светлого формата. Если у кого темный, то здесь не чего сложного, чтоб перевести все под нужную палитру цвета.

Демонстрация
2021-10-06 Загрузок: 1 Просмотров: 287 Комментарий: (0)

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

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

Оставь свой отзыв

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