Блог

Я хотел бы реализовать этот компонент в React по ссылке ниже http://uxkids.com/portfolio/the-new-apprentice-software-for-treasury /

Как реализовано перетаскивание щелчок и как вы снимаете маску с части изображения? Под ним есть 2 изображения

 <div className="parent">
   <div className="dragControl" id="bar"></div>
   <img src="image1.jpg" />
   <img src="image2.jpg" />
</div>
  

Как вы создаете эту маску, чтобы разоблачить 2 изображения? Они выглядят так, как будто оба являются абсолютными позициями, а затем медленно снимаются.

Я просто хотел узнать часть HTML / CSS, поскольку это мешает мне реализовать код React.

Однажды мне приходилось делать аналогичный эффект только с помощью jQuery и простого HTML. Вот воссоздание, которое я собрал в codepen.

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

  var offset = container.offset().left;
 var x = e.clientX - offset;
  

Затем присвоение верхнему изображению overflow: hidden значения создаст эффект покрытия и раскрытия нижнего изображения по мере изменения ширины контейнера-оболочки изображения.

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

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

    if (x < 700 amp;amp; x > 0) {
    // change css here
   }
  

еще одна вещь, о которой следует упомянуть, я добавил эти значения css к оболочкам изображений:

 pointer-events: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  

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

Я надеюсь, что это решит вашу проблему или, по крайней мере, наставит вас на правильный путь. Счастливого Хэллоуина!