如何阻止调整大小栏如此小故障？
[英]How do I stop resize bar from being so glitchy?
问题描述
Basically, I want to make the resize bar move as I move the cursor across as long as I'm focusing on it.
基本上，只要我专注于它，我想让调整大小栏随着我移动光标而移动。 I did that but the thing is that it's being glitchy.我这样做了，但问题是它出现了故障。 It returns to the original state one time and the other time follows the cursor.它一次返回原始状态，另一次跟随光标。 I don't want it to do that.我不希望它这样做。
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; }
<!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>
As you can see, as you drag the element, it works but it isn't smooth.如您所见，当您拖动元素时，它可以工作，但并不顺畅。 It returns to its original coordinates sometimes and then follows the cursor the other time.它有时会返回到其原始坐标，然后在其他时间跟随光标。
2 个解决方案
解决方案1
1 已采纳 2020-10-11 19:13:21
.offsetX is the mouse position relative to the element, so that makes the slider jump. .offsetX是鼠标相对于元素的位置，因此使滑块跳跃。 .clientX is the mouse position relative to the document. .clientX是鼠标相对于文档的位置。
In order to use clientX, however, you need to subtract the original x position of the slider.但是，为了使用 clientX，您需要减去滑块的原始 x 位置。 I'm going to assume that .Container will always be the container for the slider.我将假设.Container将始终是滑块的容器。 By using getBoundingClientRect() (which is a operation that takes time), I can get the x position (.left) from said 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>
解决方案2
1 2020-10-11 19:34:43
My approach is to use a translation, which are generally considered better for animations than absolute positioning, for moving the slider.我的方法是使用平移，通常被认为比绝对定位更适合动画，用于移动滑块。
I'm also using pointer events over mouse events.我也在鼠标事件上使用指针事件。 These work the same as mouse events but also will work for touch devices.这些工作与鼠标事件相同，但也适用于触摸设备。 They also allow the use of setPointerCapture , which means that once we have clicked on the slider, it will receive all events until we release it (which we do in the mouseUpHandler).它们还允许使用setPointerCapture ，这意味着一旦我们点击了滑块，它将接收所有事件，直到我们释放它（我们在 mouseUpHandler 中这样做）。 You can see in the demo that even if the pointer goes outside the image, you can still move the slider around.您可以在演示中看到，即使指针超出图像，您仍然可以移动滑块。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.