Прихоть CSS | Используйте изменение размера, чтобы получить мощную функцию предварительного просмотра изображения перетаскиванием

внешний интерфейс JavaScript CSS
Прихоть CSS | Используйте изменение размера, чтобы получить мощную функцию предварительного просмотра изображения перетаскиванием

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

идеи

Прежде всего, для достижения такого эффекта на самом деле есть много способов, если вам не требуется перетаскивание.

  1. наложить две картинки вместе
  2. Измените ширину верхнего изображения или используйте маску, чтобы изменить интервал прозрачности маски.

Оба способа просты для иллюстрации.

Предположим, что наша структура выглядит следующим образом, используяbackgroundПокажите две картинки:

<div class="g-outer">
    <div class="g-inner"></div>
</div>

Способ 1, способ изменить ширину верхнего изображения:

.g-outer {
    width: 650px;
    height: 340px;
    background-image: url(image1.png);
    overflow: hidden;
}
.g-inner {
    height: 340px;
    background: url(image2.png);
    animation: widthchange 3s infinite alternate linear;
}
@keyframes widthchange {
    0% {
        width: 650px;
    }
    100% {
        width: 0px;
    }
}

Эффект следующий:

Конечно, используяmaskМетодом маскировки тоже очень легко добиться подобного эффекта:

.g-outer {
    background-image: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png);
}
.g-inner {
    background: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png);
    mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
    mask-size: 200% 100%;
    animation: maskChange 2s infinite alternate linear;
}
@keyframes maskChange {
    0% {
        mask-position: -100% 0;
    }
    100% {
        mask-position: 0 0;
    }
}

Вы также можете получить тот же эффект:

Полный код для приведенного выше DEMO:CodePen Demo -- Switch Picture

Я не очень разбираюсь в мощном атрибуте маски, так что можете сильно ткнуть:Фантастическая МАСКА CSS

Перетащите, используя изменение размера

Следующий шаг — самый важный и важный — разумное использование CSS.resizeАтрибут, реализующий ширину элемента управления перетаскиванием.

чтоresize?

resize: Это свойство позволяет вам контролировать размер элемента.

Синтаксис следующий:

{
/* Keyword values */
  resize: none;
  resize: both;
  resize: horizontal;
  resize: vertical;
  resize: block;
  resize: inline;
}

Взгляните на простейшую демонстрацию:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut qui labore rerum placeat similique hic consequatur tempore doloribus aliquid alias, nobis voluptates. Perferendis, voluptate placeat esse soluta deleniti id!</p>
p {
    width: 200px;
    height: 200px;
    resize: horizontal;
    overflow: scroll;
}

Здесь мы устанавливаем длину и ширину200pxиз<p>Изменить ширину для горизонтального перетаскивания. Эффект следующий:

Краткое изложение некоторых советов:

  • resizeдля вступления в силу необходимо сотрудничатьoverflow: scroll. Конечно, правильно сказать, чтоoverflowнетvisibleили может воздействовать непосредственно на замещающие элементы, такие как изображения,<video>а также<iframe>,<textarea>Ждать
  • мы можем пройтиresizeизhorizontal,vertical,bothустановить горизонтальное перетаскивание, вертикальное перетаскивание, горизонтальное и вертикальное перетаскивание
  • совместим с контейнеромmax-width,min-width,max-height,min-heightОграничьте диапазон перетаскиваемых изменений

Применить изменение размера к переключению перетаскивания изображения

Хорошо, далее мы применим изменение размера к переключению перетаскиванием изображения.

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

<div class="g-outer">
    <div class="g-inner width-change"></div>
</div>
.g-outer {
    width: 650px;
    height: 340px;
    background-image: url(image1.png);
    overflow: hidden;
}

.g-inner {
    height: 340px;
    background: url(image2.png);
    resize: horizontal;
    overflow: scroll;
    max-width: 640px;
    min-width: 10px;
}

можно увидеть,g-innerуже настроенresize: horizontal, будет разрешено перетаскивать по горизонтали, фактический эффект будет следующим:

Ну, это очень близко, потому что нужно сотрудничатьoverflow: scroll, так что есть раздражающие полосы прокрутки, очень неприглядные, мы должны найти способ избавиться от полос прокрутки.

Скрыть полосы прокрутки с еще одним уровнем вложенности и абсолютным позиционированием

Есть много способов скрыть полосу прокрутки, здесь мы представляем один из хитрых способов, вносим некоторые изменения в нашу структуру, а затем накладываем еще один слой div:

<div class="g-outer">
    <div class="g-inner">
        <div class="g-resize"></div>
    </div>
</div>

Мы будем управлять функцией перетаскивания, чтобыg-resize, который отвечает за изменение ширины элемента, аg-innerк абсолютному позиционированию, когдаg-resizeпо мере увеличения его ширины его родительский элементg-innerтакже будет соответственно увеличиваться, и, наконец, установитьg-resizeизopacityУстановите 0, чтобы скрыть полосы прокрутки.

Основной код выглядит следующим образом:

.g-outer {
    position: relative;
    width: 650px;
    height: 340px;
    background-image: url(image1.png);
    overflow: hidden;
}
.g-inner {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 0;
    max-width: 650px;
    height: 340px;
    background-image: url(image2.png);
}
.g-resize {
    position: relative;
    resize: horizontal;
    overflow: scroll;
    width: 0;
    height: 340px;
    max-width: 650px;
    min-width: 15px;
    animation: opacityChange 3s infinite alternate linear;
}
@keyframes opacityChange {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Здесь для удобства яopacityАнимационный эффект затухания и затухания установлен для легкой индикации:

Показать полосу перетаскивания с псевдоэлементом

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

.g-inner:before {
    content: "↔";
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    right: 0;
    height: 100%;
    line-height: 340px;
}

Окончательный результат идеален:

Полный подробный код вы можете найти в моемCSS-вдохновениесм. на:

Вдохновение CSS — используйте изменение размера, чтобы получить функцию предварительного просмотра переключения изображений.

В заключение

Благодаря этой статье вы можете узнать:

  • Используйте resize для управления размером контейнера
  • Скрыть неприглядные полосы прокрутки некоторыми хитрыми способами
  • И с некоторыми из вышеперечисленных навыков используйте чистый CSS для реализации функции предварительного просмотра перетаскивания изображения.

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные эффекты CSS могут следовать за мнойCSS-вдохновение

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.