我制作了一个纯JS可调整大小的元素，但是调整大小的元素并不平滑。 如何使它更平滑？

Question

因此，我做了一件事情，其中​​元素的一半可调整大小，并且公开了父元素，您可以看到父元素的background-image 。 除了调整大小不够平滑外，其他所有内容似乎都可以正常工作。 第一次调整大小后，它只是开始粘住并且效果不佳。

链接： https ： //jsfiddle.net/mcquintrix/u0Ljnttg/2/

 var links = document.getElementById("imageLinks"); links.onmousedown = function(e) { var theSrc = e.target.dataset.src; if (theSrc) { str = "url(\\"" + theSrc + "\\");"; //Sorry for using this: document.getElementById("imageBack").setAttribute("style", "background-image:" + str) } } var resizer = document.getElementById("content-resize"); resizer.onmousedown = resizableStart; function resizableStart(e) { var elem = document.getElementById("content"); elem.originalW = elem.clientWidth; this.onmousemove = resizableCheck; this.onmouseup = this.onmouseout = resizableEnd; } function resizableCheck(e) { var elem = document.getElementById("content"); if (elem.clientWidth === elem.originalW) { elem.originalX = e.clientX; this.onmousemove = resizableMove; } } function resizableMove(e) { var elem = document.getElementById("content"); var newW = elem.originalW - e.clientX + elem.originalX; if (newW < elem.originalW) { elem.style.width = newW + 'px'; } } function resizableEnd() { this.onmousemove = this.onmouseout = this.onmouseup = null; } 

 html, body { min-height: 100% !important; height: 100%; } .container { width: 100%; min-height: 100%; height: 100%; } .images { width: 100%; min-height: 100% !important; height: 100%; } #content { min-height: 100% !important; height: 100%; /*Change this to change width*/ width: 70%; resize: horizontal; float: right; position: relative; background: white; } div { border: 1px solid black; } span { border: 1px solid black; border-radius: 50%; position: absolute; top: calc(50% - 20px); left: -10px; cursor: pointer; height: 40px; width: 40px; display: inline-block; background: white; } 

 <div class='container'> <div class='images' id="imageBack" style="background-image: url('http://data.whicdn.com/images/20948152/large.png')"> <div class='content' id="content"> <div id="imageLinks"> <a href="#" data-src='http://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg'>1</a> <a href="#" data-src='http://i.imgur.com/NhDejjN.jpg'>2</a> <a href="#" data-src='https://s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg'>3</a> <a href="#" data-src='http://data.whicdn.com/images/20948152/large.png'>4</a> </div> <span id="content-resize"></span> </div> </div> </div> 

Answer 1

我玩的还不是很多，所以我肯定有一些未注意到的问题，但是在我认为您正在描述的过程中，它提供了一些改进。 地址@ScottFanetti评论。 写在ES6中。 希望它可以帮助您继续进行实验，或为其他人提供起点。

 const content = document.getElementById('content'); const startW = content.clientWidth; const imageBack = document.getElementById('imageBack'); let resizable; let originalW; let originalX; document.getElementById('content-resize').addEventListener('dragstart', (e) => e.preventDefault(), false); document.addEventListener('mousedown', (e) => { resizable = e.target.id === 'content-resize'; if (resizable) { originalW = content.clientWidth; originalX = e.clientX; } else if (e.target.tagName === 'A' && e.target.dataset.src) { imageBack.style.backgroundImage = `url(${e.target.dataset.src})`; } }, false); document.addEventListener('mouseup', () => resizable = false, false); document.addEventListener('mouseenter', (e) => resizable = imageBack.contains(e.target), false); document.addEventListener('mousemove', (e) => { if (resizable) { content.style.width = `${Math.min(originalW - e.clientX + originalX, startW)}px`; } }, false); 

 html, body { min-height: 100% !important; height: 100%; } .container { width: 100%; min-height: 100%; height: 100%; } .images { width: 100%; min-height: 100% !important; height: 100%; } #content { min-height: 100% !important; height: 100%; /*Change this to change width*/ width: 70%; resize: horizontal; float: right; position: relative; background: white; } div { border: 1px solid black; } span { border: 1px solid black; border-radius: 50%; position: absolute; top: calc(50% - 20px); left: -10px; cursor: pointer; height: 40px; width: 40px; display: inline-block; background: white; } 

 <div class="container"> <div class="images" id="imageBack" style="background-image: url(//data.whicdn.com/images/20948152/large.png)"> <div class="content" id="content"> <div id="imageLinks"> <a href="#" data-src="//ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg">1</a> <a href="#" data-src="//i.imgur.com/NhDejjN.jpg">2</a> <a href="#" data-src="//s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg">3</a> <a href="#" data-src="//data.whicdn.com/images/20948152/large.png">4</a> </div> <span id="content-resize"></span> </div> </div> </div> 

Answer 2

@Harshal Carpenter，这是我的摘录：

我对您的代码所做的是：

1.删​​除这些行，以防止在将图像调整为以前的较大尺寸后图像变小。

if (newW < elem.originalW) {
   elem.style.width = newW + 'px';
}

2. 删除this.onmouseout以防止在将鼠标从该圆形手柄上移开时停止调整大小。 您可能要继续调整大小，因为鼠标可能会在圆形旋钮之前快速移动，最终鼠标光标退出圆形旋钮。

3. 将鼠标事件侦听器附加到div#imageBack而不是div#content-resize ，与上面相同的原因，即使鼠标离开div#content-resize ，您也可能希望它继续拖动。

 var links = document.getElementById("imageLinks"); links.onmousedown = function(e) { var theSrc = e.target.dataset.src; if (theSrc) { str = "url(\\"" + theSrc + "\\");"; //Sorry for using this: document.getElementById("imageBack").setAttribute("style", "background-image:" + str) } } var container = document.getElementById("imageBack"); var resizer = document.getElementById("content-resize"); container.onmousedown = resizableStart; function resizableStart(e) { if(e.target == resizer){ var elem = document.getElementById("content"); elem.originalW = elem.clientWidth; this.onmousemove = resizableCheck; this.onmouseup = resizableEnd; } } function resizableCheck(e) { var elem = document.getElementById("content"); if (elem.clientWidth === elem.originalW) { elem.originalX = e.clientX; this.onmousemove = resizableMove; } } function resizableMove(e) { var elem = document.getElementById("content"); var newW = elem.originalW - e.clientX + elem.originalX; elem.style.width = newW + 'px'; } function resizableEnd() { this.onmousemove = this.onmouseout = this.onmouseup = null; } 

 html, body { min-height: 100% !important; height: 100%; } .container { width: 100%; min-height: 100%; height: 100%; } .images { width: 100%; min-height: 100% !important; height: 100%; } #content { min-height: 100% !important; height: 100%; /*Change this to change width*/ width: 70%; resize: horizontal; float: right; position: relative; background: white; } div { border: 1px solid black; } span { border: 1px solid black; border-radius: 50%; position: absolute; top: calc(50% - 20px); left: -10px; cursor: pointer; height: 40px; width: 40px; display: inline-block; background: white; } 

 <div class='container'> <div class='images' id="imageBack" style="background-image: url('http://data.whicdn.com/images/20948152/large.png')"> <div class='content' id="content"> <div id="imageLinks"> <a href="#" data-src='http://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg'>1</a> <a href="#" data-src='http://i.imgur.com/NhDejjN.jpg'>2</a> <a href="#" data-src='https://s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg'>3</a> <a href="#" data-src='http://data.whicdn.com/images/20948152/large.png'>4</a> </div> <span id="content-resize"></span> </div> </div> </div>