Управление HTML DOM с ванильным JavaScript

Авторизоваться

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

<div class="container">
    <!-- Show the modified image -->
    <div class="modified-image"></div>

    <!-- The resizer -->
    <div class="resizer" id="dragMe"></div>

    <!-- The original image -->
    <img src="/path/to/original/image.png" />
</div>

Разметка

Первоначально, измененное изображение займет половину ширины контейнера. Он расположен абсолютно в контейнере:

.container {
    position: relative;
}
.modified-image {
    /* Absolute position */
    left: 0;
    position: absolute;
    top: 0;

    /* Take full height and half width of container */
    height: 100%;
    width: 50%;
}

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

<div
    class="modified-image"
    style="background-image: url('/path/to/modified/image.png')"
>
</div>

Модифицированный элемент использует больше стилей для отображения фонового изображения в желаемой позиции:

.modified-image {
    background-position: top;
    background-repeat: no-repeat;
    background-size: auto 100%;
    ...
}

Намного проще установить позицию для изменения размера. Отображается в центре контейнера:

.resizer {
    /* Absolute position */
    left: 50%;
    position: absolute;
    top: 0;

    /* Size */
    height: 100%;
    width: 2px;

    /* Background */
    background-color: #cbd5e0;

    /* Indicate that it can be resized */
    cursor: ew-resize;
}

Обработка событий

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

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

// Query the element
const resizer = document.getElementById('dragMe');
const leftSide = resizer.previousElementSibling;

// The current position of mouse
let x = 0;
let y = 0;

// The width of modified element
let leftWidth = 0;

// Handle the mousedown event
// that's triggered when user drags the resizer
const mouseDownHandler = function(e) {
    // Get the current mouse position
    x = e.clientX;
    y = e.clientY;
    leftWidth = leftSide.getBoundingClientRect().width;

    // Attach the listeners to `document`
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
};

const mouseMoveHandler = function(e) {
    // How far the mouse has been moved
    const dx = e.clientX - x;
    const dy = e.clientY - y;

    let newLeftWidth = (leftWidth + dx) * 100 / resizer.parentNode.getBoundingClientRect().width;
    newLeftWidth = Math.max(newLeftWidth, 0);
    newLeftWidth = Math.min(newLeftWidth, 100);

    // Set the width for modified and resizer elements
    leftSide.style.width = `${newLeftWidth}%`;
    resizer.style.left = `${newLeftWidth}%`;
};

// Attach the handler
resizer.addEventListener('mousedown', mouseDownHandler);

Когда пользователь перемещает мышь, мы должны убедиться, что мышь не перемещена из контейнера. Вот почему мы должны сравнить newLeftWidth с 0 и 100 процентами:

const mouseMoveHandler = function(e) {
    ...

    newLeftWidth = Math.max(newLeftWidth, 0);
    newLeftWidth = Math.min(newLeftWidth, 100);
};

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?

Разметка

Обработка событий