<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

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

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Цифровая лупа на JavaScript

Цифровая лупа на JavaScript

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

Далее я покажу пример реализации такого рода технологии. Сначала напишем HTML разметку:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Цифровая лупа на чистом JS</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>
<body>


<div class="zoomer" onmousemove="zoom(event)"
     style="background-image: url(zoom-image-2.jpg);" >
    <img src="zoom-image-2.jpg" />
</div>

<div class="zoomer" onmousemove="zoom(event)"
     style="background-image: url(zoom-image.jpg);" >
    <img src="zoom-image.jpg" />
</div>

</body>
</html>

Далее необходимо в файл style.css добавить следующий код:

.zoomer {
    background-position: 50% 50%;
    position: relative;
    width: 500px;
    overflow: hidden;
    cursor: zoom-in;
}

.zoomer img:hover {
    /*
    * скрываем начальное изображение
    * при наведении курсора на блок
    */
    opacity: 0;
}

.zoomer img {
    transition: opacity .5s;
    display: block;
    width: 100%;
}

И вот собственно сам JavaScript код для создания цифровой лупы:

function zoom(event) {
    let zoomer = event.currentTarget;

    event.offsetX ? (offsetX = event.offsetX) : (offsetX = event.touches[0].pageX);
    event.offsetY ? (offsetY = event.offsetY) : (offsetX = event.touches[0].pageX);

    let x = offsetX / zoomer.offsetWidth  * 100;
    let y = offsetY / zoomer.offsetHeight * 100;

    zoomer.style.backgroundPosition = x + "% " + y +"%";
}

Вот так можно реализовать увеличение изображения, как при просмотре лупой, на чистом JavaScript.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.