Question

我正在进行图像比较功能。它工作得很好，除了前（蓝色）图像改变宽度时图像闪烁外。 z-index似乎存在某种问题？

行为取决于所使用的浏览器：

Safari ：闪烁
Chrome ：闪烁很多
Firefox ：始终显示绿色图像

const $imageSlider = document.querySelector(".image-slider");
const $sliderHandle = $imageSlider.querySelector(".image-slider__handle");
const $container = $imageSlider.querySelector(".image-slider__container--left");

const handleMouseMove = event => {
  const sliderPosition = `${(event.offsetX / $imageSlider.offsetWidth) * 100}%`;
  $container.style.width = sliderPosition;
  $sliderHandle.style.left = sliderPosition;
};

$imageSlider.addEventListener("mousemove", event =>
  requestAnimationFrame(() => handleMouseMove(event))
);

.image-slider {
  position: relative;
  display: inline-block;
}

.image-slider__handle {
  content: " ";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  display: block;
  width: 0.25rem;
  background-color: white;
  transform: translateX(-50%);
}

.image-slider__container {
  height: 100%;
}

.image-slider__container--left {
  position: absolute;
  width: 50%;
  overflow: hidden;
}

.image-slider__image {
  display: block;
  height: 100%;
}

<p>Move the mouse across the surface below to compare images:</p>

<div class="image-slider">
  <div class="image-slider__container image-slider__container--left">
    <img src="https://via.placeholder.com/200/0000FF/808080?text=Lorem" class="image-slider__image" alt="" />
  </div>
  <div class="image-slider__container image-slider__container--right">
    <img src="https://via.placeholder.com/400/00FF00/808080?text=Ipsum" class="image-slider__image" alt="" />
  </div>
  <div class="image-slider__handle"></div>

</div>

Answer 1

我会考虑使用多个背景和更少的代码的更简便方法。通过使用background-clip和content-box，我可以通过增加填充量来调整可见部分：

const $imageSlider = document.querySelector(".image-slider");

const handleMouseMove = event => {
  $imageSlider.style.paddingLeft = event.offsetX+"px";
};

$imageSlider.addEventListener("mousemove", event =>
  requestAnimationFrame(() => handleMouseMove(event))
);

.image-slider {
  width:400px;
  height:200px;
  background:
    /*a white line(width:4px height:100%) positionned on the left of the content-box*/
    linear-gradient(#fff,#fff) left/4px 100% content-box,
    /*the top image a the center clipped to the content-box but positionned relatively to the padding-box*/
    url(https://via.placeholder.com/200/0000FF/808080?text=Lorem) center/cover padding-box content-box,
    url(https://via.placeholder.com/200/00FF00/808080?text=Ipsum) center/cover;
 background-repeat:no-repeat;
 box-sizing:border-box;
}

<p>Move the mouse across the surface below to compare images:</p>

<div class="image-slider">
</div>

Answer 2

闪烁是由于在滑行时运行的逻辑中影响图像滑块的“悬停状态”引起的。将滑块悬停在鼠标下方可移动手柄，并且手柄现在会拦截悬停事件，从而导致进一步的悬停具有相对于手柄而不是滑块计算出的偏移值。并且，一旦鼠标移开手柄，它就会再次正确导致滑块上发生mousemove事件。

通过对所有可能阻塞（和拦截）指针事件的元素应用pointer-events: none可以轻松解决此问题。

请避免更改约定-我为自己重命名了一些类。

const imageSlider = document.querySelector('.slider'); const sliderHandle = imageSlider.querySelector('.handle'); const container = imageSlider.querySelector('.pane.left'); imageSlider.addEventListener('mousemove', event => { const sliderPosition = `${(event.offsetX / imageSlider.offsetWidth) * 100}%`; container.style.width = sliderPosition; sliderHandle.style.left = sliderPosition; });

.slider { position: relative; display: inline-block; } .slider > .handle { content: " "; position: absolute; left: 50%; top: 0; bottom: 0; display: block; width: 0.25rem; background-color: white; transform: translateX(-50%); pointer-events: none; /* Don't block mouse events to .slider! */ } .slider > .pane { height: 100%; pointer-events: none; /* Don't block mouse events to .slider! */ } .slider > .pane.left { position: absolute; width: 50%; overflow: hidden; } .slider > .pane > img { display: block; height: 100%; }

<p>Move the mouse across the surface below to compare images:</p> <div class="slider"> <div class="pane left"> <img src="https://via.placeholder.com/200/0000FF/808080?text=Lorem" alt="" /> </div> <div class="pane right"> <img src="https://via.placeholder.com/400/00FF00/808080?text=Ipsum" alt="" /> </div> <div class="handle"></div> </div>

更改宽度时叠加的图像闪烁

2 个答案: