Question

基本上，我要使调整大小条在我一直专注于光标的同时移动。我是这样做的，但事实是，它一直存在故障。它一次返回到原始状态，另一次跟随光标。我不希望它那样做。

Textview tvValue = findViewById(R.id.tv_value);  private void OnClickFunc() { tvValue.setGravity(Gravity.RIGHT);

let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;

slider.addEventListener("mousedown", function(e) {
    clicked = true;
    slider.style.left += e.offsetX + "px";
})

container.addEventListener("mousemove", function(e) {
    if(clicked) {
        slider.style.left = e.offsetX + "px"
        console.log("Cursor is " + e.offsetX)
        console.log("Element is" + slider.style.left)
    }
})

container.addEventListener("mouseup", function() {
    clicked = false;
})

.Container {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
}

.contone {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -11;
    overflow: hidden;
}

.contone img {
    position: relative;
}

.conttwo {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -11111;
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
}

.Slider {
    cursor: ew-resize;
    background-color: black;
    opacity: 0.5;
    width: 1%;
    z-index: 9999;
    height: 100%;
    position: relative;
}

如您所见，拖动元素时，它可以工作，但并不平滑。有时它会返回其原始坐标，然后再跟随光标。

Answer 1

.offsetX是鼠标相对于元素的位置，因此可以使滑块跳转。 .clientX是鼠标相对于文档的位置。

但是，要使用clientX，您需要减去滑块的原始x位置。我将假设.Container将始终是滑块的容器。通过使用getBoundingClientRect()（这是一个耗时的操作），我可以从所述容器获取x位置（.left）。

let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;

slider.addEventListener("mousedown", function(e) {
    clicked = true;
})

container.addEventListener("mousemove", function(e) {
    if(clicked) {
        updateSliderPosition(e.clientX);
        console.clear();
        console.log("Cursor is " + e.clientX);
        console.log("Element is" + slider.style.left);
    }
})

   function updateSliderPosition(value) {
        let box = container.getBoundingClientRect();
        slider.style.left = value - box.left + "px";
   }

container.addEventListener("mouseup", function() {
        clicked = false;
})

.Container {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
}

.contone {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -11;
    overflow: hidden;
}

.contone img {
    position: relative;
}

.conttwo {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -11111;
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
}

.Slider {
    cursor: ew-resize;
    background-color: black;
    opacity: 0.5;
    width: 1%;
    z-index: 9999;
    height: 100%;
    position: relative;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="Style.css" />
    <script src="Script.js" async></script>
  </head>
  <body>
    <div class="Container">
      <div class="contone">
        <img
          class="Pic1"
          src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
          alt=""
        />
      </div>        
      <div class="Slider"></div>
      <div class="conttwo">
        <img
          class="Pic2"
          src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
          alt=""
        />      
      </div>
    </div>
  </body>
</html>

Answer 2

我的方法是使用平移来移动滑块，通常认为平移比动画绝对优于绝对定位。

我还在鼠标事件上使用了指针事件。这些功能与鼠标事件相同，但也适用于触摸设备。它们还允许使用setPointerCapture，这意味着一旦单击滑块，它将接收所有事件，直到我们释放它为止（在mouseUpHandler中进行此操作）。您可以在演示中看到，即使指针移到图像之外，您仍然可以左右移动滑块。

let slider = document.querySelector("#slider");
let container = document.querySelector('#container');
let sliderWidth = container.offsetWidth * (1 / 100);
let maxWidth = container.offsetWidth - sliderWidth;

let lastX = 0;
let thisX = 0;
let leftEdge = 0;

function mouseDownHandler(e) {
  lastX = e.clientX;

  slider.addEventListener('pointermove', mouseMoveHandler);
  slider.setPointerCapture(e.pointerId);
}

function mouseMoveHandler(e) {
  thisX = e.clientX;
  xDiff = thisX - lastX;
  leftEdge = Math.min(maxWidth, Math.max(0, leftEdge + xDiff));
  slider.style.transform = `translate(${leftEdge}px)`;
  lastX = thisX;
}

function mouseUpHandler(e) {
  slider.removeEventListener('pointermove', mouseMoveHandler);
  slider.releasePointerCapture(e.pointerId);
}

slider.addEventListener("pointerdown", mouseDownHandler);
slider.addEventListener("pointerup", mouseUpHandler)

.Container {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.contone,
.conttwo {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.contone {
  z-index: -11;
}

.conttwo {
  z-index: -11111;
}

img {
  width: 100%;
  height: 100%;
}

.Slider {
  cursor: ew-resize;
  background-color: red;
  opacity: 0.5;
  width: 1%;
  z-index: 9999;
  height: 100%;
  position: relative;
}

<div id="container" class="Container">
  <div class="contone">
    <img class="Pic1" src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg" />
  </div>

  <div id="slider" class="Slider"></div>

  <div class="conttwo">
    <img class="Pic2" src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg" />
  </div>
</div>

如何停止大小调整栏出现这么小故障？

2 个答案: