Управление DOM с помощью JavaScript в современных браузерах и IE 11+
В этом посте мы создадим слайдер для визуального сравнения двух изображений. Слайдер имеет три элемента, организованных как показано ниже:
<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);
};